flutter 项目创建

flutter 项目创建

可以通过命令行或者 Android Studio来创建

命令行创建

项目名不允许有驼峰，使用下划线分割

flutter create xxx_yyy

Android Studio 创建

需要提前安装 flutter 和 dart 插件 plugins

项目根目录文件

• .dart_tool 记录第三方插件的一些信息
• .idea 当前项目配置
• xxxx.iml 功能同上
• android 工程
• ios 工程
• lib 源代码
  main.dart → main()
• test 测试代码
• .metadata 对flutter 版本进行记录

热重载和热重启

热重载（Hot Reload）

主要执行 build 方法

热重启（Hot Restart）

重新执行整个 app

项目启动

main() → runApp()，main 函数调用 runApp，需要传入 widget，可以将 MaterApp作为 runApp的参数传入进去，cupertino是ios风格。

debugShowCheckedModeBanner: false 去除debug标识

home 中套入 Scaffold脚手架，可以做一些默认的配置

快捷键

项目创建flutter create

项目启动flutter run

查看类的实现 ctrl+alt+b

给 widget包裹父元素  alt+enter

将 StatelessWidget 转换为 StatefulWidget  alt+enter

setting -> keymap ->  extract 搜索

抽取 widget ctrl+alt+m

抽取 widget ctrl+alt+m

基础示例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('第一个 flutter 程序'),
      ),
      // body: HomeContent(),
      body: HomeCheck(),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(
        'hello world',
        textDirection: TextDirection.ltr,
        style: TextStyle(fontSize: 30, color: Colors.amber),
      ),
    );
  }
}

class HomeCheck extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return HomeCheckState();
  }
}

class HomeCheckState extends State<HomeCheck> {
  var flag = false;


  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Checkbox(
              value: flag,
              onChanged: (value) {
                setState(() {
                  flag = value!;
                });
              }),
          Text('同意协议'),
          ElevatedButton(onPressed: () {}, child: Text('按钮'))
        ],
      ),
    );
  }
}