1.Hello world

import 'package:flutter/material.dart';

void main() {
  runApp(Center(
    child: Text(
      'Hello world',
      textDirection: TextDirection.ltr,
    ),
  ));
}

1. 在程序的開頭我們使用import來引入非本文檔內的資源（工具類，部件等），'package:flutter/material.dart' 這個包則google提供的一套界面的設計規則（也可以說是一套基本部件）；

2. void main()是程序的入口，runApp則代表開始運行程序其內的參數表示要展示的部件；

3. Center和Text會在后續進行介紹，這里只簡單說明，center是讓其子部件居中的一種布局方式，Text代表文本部件。

2.自定義一個靜態小部件

效果與第一節相同

import 'package:flutter/material.dart'; 

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello world',
        textDirection: TextDirection.ltr,
      ),
    );
  }
}

1. 創建了一個名字為MyApp的類（部件），繼承于StatelessWidget（靜態部件：內部不產生數據變化，純碎為了展示的部件）；
2. 繼承StatelessWidget后需要重寫build的方法，此方法返回一個部件；
3. 在main函數的runApp中將MyApp實例后（在dart中new一個對象時，new可以省略）放入。

3.文字樣式

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello world',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 40,
          fontWeight: FontWeight.bold
        ),
      ),
    );
  }
}

1. 使用style來添加文字樣式，Text組件樣式的類型需為TextStyle；
2. 在TextStyle中可以自行定義樣式。

4.使用Material風格

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Hello(),
      ),
    );
  }
}

class Hello extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello world',       
        style: TextStyle(
          fontSize: 40,
          fontWeight: FontWeight.bold
        ),
      ),
    );
  }
}

1. 使用MaterialApp對原來的控件進行包裹，我們前面說過Material是一種設計規則，當時用MaterialApp進行包裹時，其內部的控件就會將一些屬性設為默認值，比如Text部件，之前我們需要制定字體的排列方式，現在則不用，默認就是從左往右進行排列。

4.1添加頂部導航欄并設置主題色

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.green
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Gecer'),
        ),
        body: Hello(),
      ),
    );
  }
}

1. 在Scaffold中添加appBar，即可添加頂部導航欄；
2. 在MaterialApp中設置theme，即可設置主題相關數據，primaryColor則代表主題色。