[Flutter笔记] Flutter 入门

Flutter 的特性

Hot Restart，即 app 运行一次后，可以快速刷新
使用 StatelessWidget 封装后，每次 Command + S 后模拟器界面会自动刷新
一般使用 Android Studio 进行开发，因为支持 Flutter 插件和 Hot Restart

Flutter 常用 Widget

在 main.dart 中启动 app

void main() => runApp(MyApp())
class MyApp ....

Widget 的属性，与构造器有所不同，可以任意顺序，可以称为 key

Text("Hello", fontSize:20, color: Colors.blue,)

app 的基类 MeterialApp

MeterialApp(home: Text("Hello", 
                    /*更多属性*/)
                     

页面容器 Scaffold，包含 appBar, body, floatActionButton等属性

Scaffold(appBar: AppBar(title: Text("Brook", titleCenter: true),
         body: Text("Hello guys"),
         floatingActionButton: FloatingActionButton(child: Text("Press me")
              )

居中容器 Center，可以将一个 child 包含后使 child 居中，并占用尽可能大的空间

Center(child: Text("Hello guys")

可以 Center、FloatingActionButton 和 AppBar 不难看出，所有可见部分都是 Widget 形式存在的，都是通过 child 层层包含的。

Color 和 Font

通过 widget 的 backgroundColor 或者 color 来设置背景或者前台颜色，调用类似 Color.blue 的样式，按照 Meterial.io 的 Meterial Design 规范，都有对应的颜色属性进行使用，比如 Color.red[600]

AppBar(backgroundColor: Colors. blue)

设置文本的字体，通过 textStyle 属性

Text("hello", textStyle: TextStyle(

自定义字体，将下载的字体放入项目的 fonts 路径下，并在项目配置文件 pubspec.yaml 的 fonts 处进行配置，

fonts: 
    - family: IndieFlower
      fonts:
          - asset: fonts/IndieFlower.ttf

之后可以在 textStyle 的 fontFamily 中进行使用

TextSyle(fontFamily: "IndieFlower")

开启 Hot Restart

在 Android Studio 编辑器中输入 stl 可以自动完成构造 StatelessWidget 的代码块

class Home extends StatelessWidget {
    @override
    Widget build(buildContext context) {
        return Text("Hello")
    }

Widget 的状态：

• 不需要状态变化的 widget 如 Text，Image，属于 StatelessWidget
• Switch/Checkbox 则需要有状态变化，属于 StatefulWidget

通过 StatelessWidget 构造 home 的 app 支持在 Save 文件自动 Hot Restart

Image Widget

使用 Image widget 可以进行本地和网络图片的展示

• 本地图片，需要先将图片放入工程的 assets 目录下，并配置 pubspec.yaml 的 assets 路径

assets:
     - assets/

之后可以以两种形式进行使用

AssetImage("assets/imag1.jpg")
// 或者
Image.asset("assets/image1.jpg")

• 网络图片可以通过 url 地址进行展示

NetworkImage("https://x/y/z.jpg")
// 或者
Image.network("https://x/y/z.jpg")

PS：上面的 Image.asset, Image.network 是 Image 的自定义构造器

Icon 和 Button

Icon widget 是系统自带的各种 icon，是 Flutter 自带的各种矢量图，可以调整颜色和大小。

Icon(Icons.add_a_photo,
        color: Colors.red,
        size: 40,
)

Button 是一个拥有点击事件的容器 widget，比如用一个 Text 作为按钮。一些封装好的特定样式的 button，比如 FlatButton 和 RaisedButton，Raised button 是具有一些阴影效果。

RaisedButton(onPressed: () {
        print("pressed");
    },
    child: Text("Press me"),
)

也可以使用自定构造器方法使用 icon 和 label 构造 button

RaisedButton.icon(onPressed: null,
                  icon: Icon(Icons.add_a_photo),
                  label: Text("拍照"),
)

也可以直接使用封装好的单一 icon 作为 button， IconButton widget

IconButton(onPressed: null,
        icon: Icon(Icons.add_a_photo),
}