001 : flutter——初探：开发环境搭建与第一个flutter项目 Hello Flutter

发布于 2022年 02月 14日 04:17

安装

  1. 点击下面链接下载最新发行版本Flutter SDK:

    flutter_macos_2.2.3-stable.zip

    需要旧的发布版本请查看页面： SDK releases

  2. 在本地解压:

    $ cd ~/development
$ unzip ~/Downloads/flutter_macos_2.2.3-stable.zip

  3. 添加 flutter 工具到你的环境变量:

    $ export PATH="$PATH:`pwd`/flutter/bin"

开发工具

# IDE
Android Studio 社区版本 4.2

注意：需要安装flutter插件

第一个项目

项目创建与参数选择

  1. 打开IDE并选择 Create New Flutter Project
  2. 选择项目类型为 Flutter Application ，然后点击 Next
  3. 验证本地 Flutter SDK 是否正确，如果是空的检查上一步 安装 是否成功
  4. 输入一个项目名称 (例如： myapp)，并选择语言和参数.本人选择如下：
  • 语言选择了 Kotlin ｜ Swift
  • 目标平台选择了主流的所有平台：Android & IOS & web

然后点击 Next

  1. 点击 Finish
  2. 等待Android Studio安装SDK并创建项目，创建出的项目初识目录结构如下：

运行项目

在Android Studio中选择目标环境后点击运行即可在模拟器中启动我们的项目，效果如下图：

项目运行效果如下图：

我们看到官方提供的这个demo的首页 Flutter Demo Home Page ，点击右下角的 ➕ 按钮，屏幕中间的数字就会增加。

对于第一次使用flutter的我来说，这有点复杂了，我只想要个Hello Flutter

Hello Flutter

我们要修改的是./lib/main.dart文件，文件内容如下（我删除了他的一些注释）：

import 'package:flutter/material.dart';

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

// 这个窗口部件是app的根部件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这里定义app的主题
        
        // 运行项目，你会发现app有个蓝色的工具栏
        // 然后，不要退出app
        // 把primarySwatch改成 Colors.green，之后保存，IDE会自动触发热更新
        // 注意：屏幕中间的数字没有归零，说明app没有重启
        // 命令行：flutter run 运行；输入 r 触发热更新
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// 这里是app的首页
// 它是有状态的（stateful），这意味着它需要有一个状态对象（在下一个类中定义）
//     这个状态对象的字段会影响页面展现效果
// MyHomePage就是用来配置状态对象的
// MyHomePage会拿到来自父部件（MyApp）的值（title），
// 并且在状态对象的build方法中使用这些值
// Widget的子类的字段都应该是 final的
class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  
  final String title;

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

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

  void _incrementCounter() {
    setState(() {
      // 调用setState方法，会通知Flutter框架，当前状态对象中有状态变更，
      // 之后，调用下面的build方法，使用变更后的值重新渲染页面
      // 如果你没有使用setState方法，而是直接变更 _counter的值
      // build方法不会被重新调用，所以，页面上什么都不会发生
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
   
    // 每次setState被调用都会触发这个方法的重运行
    // Flutter框架做了优化，使得重新运行build方法很快
    // 这样你可以只重建任何你需要的东西，而不需要更改某个部件的完整实例
    return Scaffold(
      appBar: AppBar(
        // 这里我们可以从MyHomePage对象拿到在App.build方法中定义的值
        // 本例中会在应用栏上使用title
        title: Text(widget.title),
      ),
      body: Center(
        // Center是一种部件布局，居中布局
        // 这种布局可以携带一个单独的子元素，这个子元素处在父元素的中间位置
        child: Column(
          // Column也是一种布局，列布局
          
          // 如下操作可打开每个部件的线框：
          // 1、Adroid Studio在Flutter Inspector窗口中操作"Toggle Debug Paint"
          // 2、命令行输入 p
          // 3、Visual Studio中使用 "Toggle Debug Paint" 命令
          
          // 这里我们使用mainAxisAlignment把Column的子元素设置为垂直居中
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

读完上面源代码我们知道要展示Hello Flutter，只需要改变_MyHomePageState类中的build方法的返回值即可，修改后代码如下：

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required 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(
              'Hello Flutter',
            ),
          ],
        ),
      ),
    );
  }
}

显示效果如下：

参考链接

MacOS 安装flutter环境

推荐文章