【Flutter】入门01

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则代表主题色。