flutter / dart 筆記:app基本結構

從結論開始說…用 flutter/dart 有點像在"裝"俄羅斯套娃,而不是"拆"。每個部份都是物件,你要先準備好最裡面的東西,然後再一層一層的套上去。所以先準備 hiFlutter(文字內容) 與 appTitle(文字內容),然後裝進 appBody(容器) 與 appBar(容器)。再把這兩個放進 app(materialApp) 裡, 然後 runApp


import 'package:flutter/material.dart';

void main() {

    var appTitle = Text('first flutter app');  //標題文字

    var hiFlutter = Text(  //內容文字
        'Hi, Flutter',
        style: TextStyle(fontSize: 30),
    );

    var appBody = Center(  //body容器
        child: hiFlutter,
    );

    var appBar = AppBar(  //標題容器
        title:appTitle,
    )

    var app = MaterialApp(  //裝進 MaterialApp 裡
        home: Scaffold(
            appBar:appBar,
            body: appBody,
        ),
    );

    runApp(app);  //執行
}

這個網誌中的熱門文章

flutter / dart 筆記:使用 row , column , stack 和 list 進行資料排列