Flutter学习笔记02-Flutter第一个应用

1.创建Flutter项目

创建Flutter项目有两种方式：通过命令行创建和通过开发工具创建

通过命令行创建
在终端输命令：flutter create flutter_demo
如果创建项目时想要选择iOS和Android的开发语言，可以使用以下命令：

flutter create -i objc -a java xxapp
flutter create -i swift -a kotlin xxapp

ps：Flutter的名称不要包含特殊的字符，也不可以使用驼峰标识

通过开发工具创建
直接通过Android Studio来进行创建，选择Start a new Flutter project，之后填写相关的信息即可。

Android Studio

2. 项目结构

项目结构

3.计数器示例

Flutter项目创建好之后会有一个默认的计数器Demo。运行项目效果图如下：

计数器

每点击一次右下角带“+”号的悬浮按钮，屏幕中央的数字就会加1。在这个示例中，主要Dart代码是在 lib/main.dart 文件中，源码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

4.代码分析

导入包

import 'package:flutter/material.dart';

此行代码作用是导入了Material UI组件库。Material是一种标准的移动端和web端的视觉设计语言， Flutter默认提供了一套丰富的Material风格的UI组件。

应用入口

void main() => runApp(MyApp());

runApp是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的。runApp它接受一个Widget参数，在本示例中它是一个MyApp对象，MyApp()是Flutter应用的根组件。

应用结构

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

MyApp类代表Flutter应用，它继承了StatelessWidget类，这也就意味着应用本身也是一个Widget。在Flutter中，大多数东西都是Widget(万物皆Widget)，整个应用程序中所看到的内容几乎都是Widget，包括对齐(alignment)、填充(padding)和布局(layout)等。
Flutter在构建页面时，会调用组件的build方法，Widget的主要工作是提供一个build()方法来描述如何构建UI界面（通常是通过组合、拼装其它基础Widget）。
MaterialApp是Material库中提供的Flutter APP框架，通过它可以设置应用的名称、主题、语言、首页及路由列表等。MaterialApp也是一个Widget。
home为Flutter应用的首页，它也是一个Widget。

首页

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 // 代码省略
}

MyHomePage 是Flutter应用的首页，它继承自StatefulWidget类，StatefulWidget是一个有状态的组件。StatefulWidget和无状态的组件StatelessWidget有两点不同：StatefulWidget可以拥有状态，这些状态在Widget生命周期中是可以变的，而StatelessWidget是不可变的。StatefulWidget至少由两个类组成：一个StatefulWidget类，一个 State类； StatefulWidget类本身是不变的，但是State类中持有的状态在Widget生命周期中可能会发生变化。_MyHomePageState类是MyHomePage类对应的状态类。