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

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

腾讯服务器

88 / 年

  • 上海/北京/广州...
  • 2核 2G 4M
  • Linux/Windows
新年大优惠

腾讯服务器

425 / 年

  • 上海/北京/广州...
  • 4核 8G 10M
  • Linux/Windows
年度最便宜

腾讯服务器

1249 / 年

  • 上海/北京/广州...
  • 8核 16G 14M
  • Linux/Windows
点击查看

安装

  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环境

推荐文章