第一个flutter项目

main

程序入口 配合 runApp

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

runApp顶级函数，设置rootWidget

MyApp 是一个Weiget

MyApp是一个 无状态Widget

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

This widget is the root of your application.

Try running your application with "flutter run". You'll see the application has a blue toolbar. Then, without quitting the app, try changing the primarySwatch below to Colors.green and then invoke "hot reload" (press "r" in the console where you ran "flutter run", or simply save your changes to "hot reload" in a Flutter IDE). Notice that the counter didn't reset back to zero; the application is not restarted.

尝试使用“flutter run”运行应用程序。您将看到该应用程序有一个蓝色工具栏。然后，在不退出应用程序的情况下，尝试将下面的primarySwatch更改为Colors.green，然后调用“热重新加载”（在运行“flutter run”的控制台中按“r”，或者简单地将更改保存到flutter IDE中的“热重新载载载”）。请注意，计数器没有重置为零；应用程序不会重新启动。

Hot Reload 、Hot Restart

Hot Reload： 快速调试 不退出app

Hot Restart：重新启动调试，改变资源或者交多文件时候使用。

MyHomePage 是一个 Widget

MyHomePage是一个有状态Wdiget 可以进行刷新

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>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

createState

因为 StatefulWidget是抽象类，此方法必须实现。

/// 非缩写
@override
State<MyHomePage> createState() {
  return _MyHomePageState();
}
/// 缩写样式
@override
State<MyHomePage> createState() => _MyHomePageState();

返回值 方法名 具体实现

build 方法

This method is rerun every time setState is called, for instance as done by the _incrementCounter method above. The Flutter framework has been optimized to make rerunning build methods fast, so that you can just rebuild anything that needs updating rather than having to individually change instances of widgets.

每次调用setState时都会重新运行此方法，例如上面的_incrementCounter方法。Flutter框架经过优化，可以快速重新运行构建方法，因此您可以重新构建任何需要更新的东西，而不必单独更改小部件的实例。

setState()

setState(() {
    //刷新
});