手把手教你入门Flutter:环境搭建 + Demo讲解


前言

  • Flutter 作为Google出品的一个新兴的跨平台移动客户端UI开发框架,正在被越来越多的开发者和组织使用,包括阿里的咸鱼、腾讯的微信等。

    示意图

  • 今天,我将献上一份《全面 & 详细的Flutter入门开发攻略》,旨在让你快速上手Flutter开发,包括环境搭建、关键语法和示例讲解,希望你们会喜欢。

示意图

目录

本文主要分文两大部分:环境搭建 & 示例讲解


Flutter环境搭建

此处搭建主要是基于Mac OS。

1. 安装brew

  • 定义:包管理工具,具体介绍可参考:官网地址
  • 作用:方便进行安装 / 卸载 / 更新各种软件包,如:本文提及的flutter、nodejs等等
  • 应用场景:快速搭建本地开发环境
  • 安装:
命令行下运行:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. 下载Flutter SDK

示意图
  • 将下载的SDK解压到本地目录

3. 环境变量配置

命令行输入以下文件

// 1. 打开配置文件
open ~/.bash_profile
// 若不存在此文件,则直接新创建再打开即可,终端输入:
cd ~
touch .bash_profile
open ~/.bash_profile

// 2. 在打开的配置文件下添加以下语句 & 保存
export PATH=/Users/carson.ho/AndroidStudioProjects/flutter/bin:$PATH // 注:.../bin 前需填写的是你刚才解压flutter SDK的目录
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

// 3. 生效配置
source ~/.bash_profile

4. 安装Flutter插件(Flutter Plugin)

打开Android Studio,按如图下安装Flutter Plugin:


示意图

5. 环境检查

终端命令行输入

flutter doctor

若是用于Android场景,那么安装成功提示如下:(若是iOS场景,则需安装标红的地方)


示意图

错误处理:若存在报错,则按项进行检查即可:安装对应版本Android SDK & Android Studio。

可到此处进行快速下载:http://www.androiddevtools.cn/

至此,关于Flutter的环境搭建讲解完毕。


入门示例讲解

此处将手把手带你创建一个Flutter工程并进行Demo展示,让你快速入门Flutter。

步骤1:Android Studio创建Flutter工程

示意图
示意图

简单介绍每项:

  • Flutter Application:标准的Flutter App工程,包含标准的Dart层与Native平台层;
  • Flutter Module:Flutter组件工程,仅包含Dart层实现,Native平台层子工程为通过Flutter自动生成的隐藏工程;
  • Flutter Plugin:Flutter平台插件工程,包含Dart层与Native平台层的实现;
  • Flutter Package:Flutter纯Dart插件工程,仅包含Dart层的实现,往往定义一些公共Widget。

此处选择Flutter Application进行展示。

步骤2:工程结构解析

示意图

在Flutter上使用的代码,主要是写在 main.dart文件上,即工程一旦运行,是先执行main.dart文件。

步骤3:实例代码解析

  • 本文直接采用Flutter官方Demo说明,从而对Flutter的开发进行快速入门。
  • 点击main.dart即可看到Demo代码,具体解析如下:
/**
 *  1. 导入Material UI组件库
 **/
import 'package:flutter/material.dart';
// 定义:Material是Flutter 实现 Material Design设计风格(谷歌推出的一套视觉设计语言)的基础包,
// 作用:包含文本输入框(Text)、图标( Icon)、图片(Image)、行排列布局( Row)、 列排列布局(Column)、 Decoration(装饰器)、动画等组件
// 因此基本上每个flutter程序的代码,第一行代码都会引入这个包


/**
 *  2. Flutter应用的入口:runApp(),即首先执行该函数
 *  作用:将给定的组件(widget)显示在屏幕上
 *  注:若不使用runApp(),程序仍会正常运行,但屏幕上什么都不会显示,相当于一个Dart控制台程序
 **/
void main() => runApp(MyApp());

// 等价于
// void main() {
// return runApp(MyApp());
// }
// 下面,将执行MyApp -> 跳转到3

/**
 *  3. 自己定义的组件类MyApp,继承自StatelessWidget
 *  作用:整个应用的底层Widget
 *  注:StatelessWidget是无状态组件,具体介绍请跳出看附录1
 **/
class MyApp extends StatelessWidget {

  // build():Widget中的生命周期方法
  // 作用:描述如何构建UI界面
  // 关于其他生命周期方法,请看附录2
  @override
  Widget build(BuildContext context) {
    // Material App是一个使用Material Design设计风格的应用,具体介绍请看附录3
    // 此处设置了标题、主题 & 要显示的界面 -> MyHomePage -> 跳转4
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

/**
 *  4. 自己定义的组件类,继承自StatefulWidget
 *  作用:设置应用打开的显示界面
 *  注:StatefulWidget是有状态组件,具体介绍请跳出看附录4
 **/
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
  // 调用父类StatefulWidget的createState(),用于创建和StatefulWidget相关的状态 -> 跳转5
}

/**
 *  5. 继承自State类
 *  作用:实现一系列Widget生命周期方法 & 更新Widget的状态,
 *  注:StatefulWidget是有状态组件,具体介绍请跳出看附录4
 **/

class _MyHomePageState extends State<MyHomePage> {

  // 用于后续点击按钮统计
  int _counter = 0;

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

  // build():描述如何构建UI界面
  @override
  Widget build(BuildContext context) {

  // 此处直接采用Scaffold
  // Scaffold实现了基本的 Material Dsign布局
  // 只要是在 Material Design中定义过的单个界面显示的布局组件元素,都可以使用Scaffold绘制 
    return Scaffold(
      appBar: 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', // 显示的内容是_counter变量
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton( // 即FAB,最常用的Widget组件 = 圆形按钮
        onPressed: _incrementCounter, // 设置点击事件->调用_incrementCounter()
        tooltip: 'Increment', // 长按按钮提示
        child: Icon(Icons.add), // 按钮的子视图:“+”样式
        // 关于FAB还有更多的样式 & 属性设置,此处不做过多介绍
      ), 
    );
  }
}
附录1:StatelessWidget
  • 定义:无状态组件,继承自widget类。
  • 特点:无状态、不可变,属性不能改变
  • 示例:例如Icon、IconButton、和Text
附录2:Widget生命周期方法介绍
示意图
示意图
附录3:Material App
  • 定义:使用Material Design设计风格的应用
  • 作用:包含了Material Design设计风格的应用所需要的基本控件
  • 常用属性:
示意图

此处详细列出主题(Theme)的设置

示意图
附录4:StatefulWidget
  • 定义:有状态组件,继承自widget类。
  • 特点:存在状态 & 随着Widget生命周期发生变化
  • 示例:如Checkbox、Radio、Slider、InkWell、Form、and、TextField
  • 自定义:需继承 & 实现两个类
  1. StatefulWidget类:实现StatefulWidget的createState() = 创建和Statefulwidget相关的状态
  2. State类:实现一系列Widget的生命周期方法,用于更新Widget的状态,具体方法同附录2:Widget生命周期方法介绍

请回到原代码处

特别说明:使用第三方功能库

在实际开发过程中,会使用到第三方功能库,在Flutter中,使用第三方功能库的步骤如下:

  • 步骤1:使用pubspec.yaml文件进行配置

在iOS中,使用CocoaPods;在Android中使用Gradle

示意图
  • 步骤2:获取所需要的库到工程中,通过终端命令行执行:
// 步骤1:进入到工程目录
cd 工程目录

// 步骤2:下载Flutter包
flutter packages get

至此,关于Flutter的开发入门讲解完毕。


总结

  • 本文全面介绍了Flutter入门开发学习知识,包括:环境搭建、关键语法和示例讲解
  • 接下来推出的文章,我将继续讲解Flutter的相关知识,包括使用语法、实战等,感兴趣的读者可以继续关注我的博客哦:Carson_Ho的Android博客

请点赞!因为你们的赞同/鼓励是我写作的最大动力!

相关文章阅读
Android开发:最全面、最易懂的Android屏幕适配解决方案
Android开发:史上最全的Android消息推送解决方案
Android开发:最全面、最易懂的Webview详解
Android开发:JSON简介及最全面解析方法!
Android四大组件:Service服务史上最全面解析
Android四大组件:BroadcastReceiver史上最全面解析


欢迎关注Carson_Ho的简书!

不定期分享关于安卓开发的干货,追求短、平、快,但却不缺深度

推荐阅读更多精彩内容