移动端开发之 Flutter APP 开发初体验

Posted 新青柚

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端开发之 Flutter APP 开发初体验相关的知识，希望对你有一定的参考价值。

1.Flutter 是什么？


    Flutter是适用于所有屏幕的便携式UI框架，维护一套代码就能够为所有尺寸的屏幕提供一致的体验，降低了项目的复杂度和开发难度。移动端、浏览器端、桌面端甚至嵌入式设备都能够使用同一套UI框架。

2.准备工作：

完成以下步骤就可以开始Flutter开发了：

  1. 需要一台64位Win7系统以上、硬盘剩余空间大于400MB的电脑，电脑还要能够运行PowerShell和Git；

  2. 官网下载flutterSDK移动端开发之 Flutter APP 开发初体验；https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.5.4-hotfix.2-stable.zip

  3. 解压，然后双击运行flutter_console.bat；

  4. 添加 flutter\bin到Path环境变量中使得可以在命令行中直接运行flutter命令；

  5. 运行 flutter doctor 检查是否安装了所有依赖项，没有安装赶紧安装；

比如：

 
   
   
 

  
    
    
  
     
   
  •  
   
  •  
   
  •  
   
  •  
   
  •  
   
  •  
   
  •  
   
  •  
   
  •  
   
  •  
   
  •  
   
  •  
   
  •  
   
  •  
  

  
    
    
  
C:\Users\admin>flutter doctorDoctor summary (to see all details, run flutter doctor -v):[√] Flutter (Channel stable, v1.5.4-hotfix.2, on Microsoft Windows [Version 10.0.17134.829], locale zh-CN)[X] android toolchain - develop for Android device X Unable to locate Android SDK. Install Android Studio from: https://developer.android.com/studio/index.html On first launch it will assist you in installing the Android SDK components. (or visit https://flutter.dev/setup/#android-setup for detailed instructions). If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location. You may also want to add it to your PATH environment variable.[!] Android Studio (not installed)[!] Connected device ! No devices available! Doctor found issues in 3 categories.

 这就是缺少安卓开发环境。Flutter依赖Android Studio的完整安装来提供其Android平台依赖性。但是，可以在许多编辑器中编写Flutter应用程序。本文中我们使用 VS Code。

安装安卓环境

安装 Android Studio

想要开发Flutter，就先来安装安卓环境吧，已经安装过，直接跳过。安装教程点击这里(https://developer.android.com/studio/install)。

一定要安装这几个东西：Android SDK, Android SDK Platform-Tools, 和 Android SDK Build-Tools。

安装插件

之后在 Android Studio 中安装Flutter和Dart插件，然后根据安装完成的提示重启IDE。

安装完安卓依赖，使用flutter doctor命令检查，有警告就照着提示修复。

连接安卓设备

下一步就是连接安卓设备，首先启用手机的开发人员选项和USB调试功能，然后安装谷歌USB驱动（https://developer.android.com/studio/run/win-usb）。

移动端开发之 Flutter APP 开发初体验

系统通知栏提示连接成功了，运行检查命令。


移动端开发之 Flutter APP 开发初体验

提示依赖配置没有任何问题。

配置安卓模拟器

最后在 Android Studio 里面设置安卓模拟器：

移动端开发之 Flutter APP 开发初体验

点击这个按钮，装个9.0 和9.+镜像就行了，选择Pixel 2XL设备，然后启动。



移动端开发之 Flutter APP 开发初体验


喏，点完启动按钮之后，安卓虚拟机跑起来了。

到此环节，我们的准备工作就完成了。

接下来，一起走进Flutter的精彩世界吧！

Flutter开发第一步：使用VS Code初始化创建一个APP工程

配置VS Code

  1. 安装VS Code，访问https://code.visualstudio.com/；

  2. 安装好后，安装扩展：Flutter和Dart；

  3. 选择View > Command Palette….，输入doctor，选择Run Flutter Doctor，然后查看终端中有没有异常；

移动端开发之 Flutter APP 开发初体验


移动端开发之 Flutter APP 开发初体验

  1. 终端中显示无异常。

至此，我们完成了VS Code开发Flutter的配置。接下来就创建第一个应用。

创建一个新项目

  1. 选择View > Command Palette，输入 flutter，选择  Flutter: New Project 选项；

  2. 输入APP项目名并确认；

  3. 等上一会，项目初始化就完成了，如图所示，VS Code会自动打开新窗口，并先显示编辑状态的 main.dart 文件。main.dart中便是我们的应用的代码。于是，一个Material Design风格的简单示例APP就创建完成了。风格指引见：https://material.io/design/。

移动端开发之 Flutter APP 开发初体验

运行APP

移动端开发之 Flutter APP 开发初体验

在VS Code的最下方，我们可以看到我们连接了真实设备，就是我的开发机华为Mate10Pro。

选择Debug > Start Debugging 或者按 F5 开始调试应用。终端中显示如下，还有初始化的提示。

移动端开发之 Flutter APP 开发初体验


移动端开发之 Flutter APP 开发初体验

初始化gradle中。。。

移动端开发之 Flutter APP 开发初体验

解决依赖中。。。

第一次打开会比较久，一定要耐心等待应用程序启动，在Debug Console视图中会显示进度。应用构建完成后，就可以在设备上看到启动了的应用。

移动端开发之 Flutter APP 开发初体验


编译apk文件完成了，还能够操作。下面是APP的界面。


移动端开发之 Flutter APP 开发初体验


将main.dart代码中'You have pushed the button this many times'改为'You have clicked the button this many times'。


移动端开发之 Flutter APP 开发初体验


CTRL+S保存或热加载按钮，我们可以看到界面中的文本也更新了。


移动端开发之 Flutter APP 开发初体验


在热更新时请不要重启或者关闭你的应用。


调试模式需要更多性能，有些动画之类的东西是看不出来实际表现，所以不要在测试模式下对流畅度、性能等进行测试，可以试试文件运行的模式，就能看到发布之后的运行情况。理论上来讲，动画运行会更加流畅。


移动端开发之 Flutter APP 开发初体验


在terminal窗口运行flutter run --profile命令，会重新进行编译apk文件并重新安装，APP表现与正常安装一致，不会热更新因此性能不会受到影响。

Flutter开发第二步：编写我们自己的第一个APP

移动端开发之 Flutter APP 开发初体验https://github.com/youngchou1997/flutter_app


基于上面的内容，我们有了一个APP的框架，包含顶栏和内容组件。

接下来我们使用外部包。

安装外部包

在Flutter中，使用 pub 管理包。我们搜索english_words包，这个包其中包含几千个最常用的英语单词和一些实用功能。


可以在这里看看这个包的情况：

https://pub.dev/flutter/packages?q=english_words


pubspec文件管理Flutter应用程序的资产和依赖项。在pubspec.yaml中，将english_words（3.1.5或更高版本）添加到依赖项列表：

dependencies: flutter: sdk: flutter
 # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for ios style icons. cupertino_icons: ^0.1.2  english_words: ^3.1.5

选中pubspec.yaml文件，然后右击出现菜单，点击get packages选项


移动端开发之 Flutter APP 开发初体验


移动端开发之 Flutter APP 开发初体验


或者在终端中运行flutter pub get命令，包就会被拉取存储到项目中，我们就可以使用了。


移动端开发之 Flutter APP 开发初体验


可能遇到的问题

pub被墙，需要开代理，除此外，照以下进行设置

环境：shadowsocks、windows

本地ss端口设置(这里1080)

cmd命令行:(不用socks5)(临时设置)(也可放置环境变量)

set http_proxy=http://127.0.0.1:1080

set https_proxy=http://127.0.0.1:1080

ps:一定要用cmd命令行，千万别用powershell !!!

简易测试命令：curl https://www.google.com（别用ping）

移动端开发之 Flutter APP 开发初体验


这样就会发现能够下载成功了。如果期间重复运行flutter命令多次，可能出现锁死情况，可以去\bin\cache目录，删除lockfile文件，接下来，引入包并使用。


使用外部包

在main.dart中添加

import 'package:english_words/english_words.dart';

// 然后使用该组件 Widget build(BuildContext context) { final wordPair = WordPair.random(); // WorPaid.random() 方法随机生成一个单词 return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( '今日天气', ), Text( '$_counter', style: Theme.of(context).textTheme.display1, ), Text(wordPair.asPascalCase), // 帕斯卡类型单词，首字母大写的驼峰式命名方法 ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ),  ); }}

使用了热更新方式就会看到每次保存后，界面中单词都会变化。


移动端开发之 Flutter APP 开发初体验移动端开发之 Flutter APP 开发初体验


创建使用有状态组件

    无状态组件（stateless）意味着组件的属性是不可被改变的，组件属性是最终状态。

    有状态窗口小部件维护一个状态，这个状态可能在部件生命周期内发生更改。实现有状态窗口小部件至少需要两个类：1）一个StatefulWidget类，它创建一个State类的实例；2）State类的实例。StatefulWidget类本身是不可变的，但State类在组件生命周期中存在是可变的。

    接下来，我们创建一个有状态组件，它将被包含于无状态组件当中。我们通过直接调用这个任意单词组件生成函数来生成一个任意单词组件，从而取代之前的语句。

1. 添加代码到 main.dart 底部

class RandomWords extends StatefulWidget { @override RandomWordsState createState() => RandomWordsState();}
class RandomWordsState extends State<RandomWords> { @override Widget build(BuildContext context) { final wordPair = WordPair.random(); return Text(wordPair.asPascalCase); }}

声明RandomWords小部件的有状态的State类实例RandomWordsState。RandomWordsState依赖于RandomWords。

State声明表明我们正在使用专门用于RandomWords的通用State类。RandomWordsState中存放组件的逻辑和状态，维护这个对象就能够维护组件的状态。

2.修改代码

如下方代码块所示，将第3行和第20行代码对应在main.dart的部分删掉，然后添加21行的组件方法调用语句生成一个组件。

@override Widget build(BuildContext context) { - final wordPair = WordPair.random(); return Scaffold( 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', style: Theme.of(context).textTheme.display1, ), - Text(wordPair.asPascalCase), // 帕斯卡类型单词，首字母大写的驼峰式命名方法 + RandomWords() ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. );  }

3.结果

如果是热调试方式连接了设备，我们就能够看到，修改后的代码和之前的效果一样，我们用到了有状态部件。

创建一个无限滚动列表视图组件

接下来我们将继续创建一个无限滚动的列表视图组件，简单描述就是，这个组件可以一直滚动，不停添加新的条目。

main.dart : 

import 'package:flutter/material.dart';import 'package:english_words/english_words.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget { // 应用的根组件 @override Widget build(BuildContext context) {
 return MaterialApp( title: '欢迎使用新青柚天气', theme: ThemeData( primarySwatch: Colors.blue, ), home: RandomWords(), ); }}
class RandomWordsState extends State<RandomWords> { final _suggestions = <WordPair>[]; // 设置字体属性 final _biggerFont = const TextStyle(fontSize: 18.0);
 Widget _buildSuggestions() { return ListView.builder( padding: const EdgeInsets.all(16.0), itemBuilder: /*1*/ (context, i) { if (i.isOdd) return Divider(); /*2*/
 final index = i ~/ 2; /*3*/ if (index >= _suggestions.length) { _suggestions.addAll(generateWordPairs().take(10)); /*4*/ } return _buildRow(_suggestions[index]); }); }
 Widget _buildRow(WordPair pair) { return ListTile( title: Text( pair.asPascalCase, style: _biggerFont, ), ); }
 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('单词本') ), body: _buildSuggestions() ); }}
class RandomWords extends StatefulWidget { @override RandomWordsState createState() => RandomWordsState();}

至此，我们完成了这个组件的使用。

Tips

  1. VS Code 命令中输入 flutter Toggle Debug Paint，就能看到APP的布局线框。

  2. 我遇到的问题分享：

    1. 我工作时使用公司的git进行版本管理，平时自己的项目用github，那该如何让两个账户互通呢？

我自己想了个最简单的办法，公司项目用git命令行操作，自己的项目使用github桌面客户端管理，快捷方便地解决了我的问题。

Flutter开发第三步：扩展我们的第一个APP的功能

移动端开发之 Flutter APP 开发初体验

1.添加收藏图标

class RandomWordsState extends State<RandomWords> { // Set 元组不允许重复元素，不同于 List final Set<WordPair> _saved = Set<WordPair>(); ...
 Widget _buildRow(WordPair pair) { // 添加 _saved 状态 final bool alreadySaved = _saved.contains(pair); return ListTile( ... // 添加 icon trailing: Icon( alreadySaved ? Icons.favorite : Icons.favorite_border, color: alreadySaved ? Colors.red : null, ),  ); } ...}

2.添加收藏交互效果

class RandomWordsState extends State<RandomWords> { ...
 Widget _buildRow(WordPair pair) { ... return ListTile( ... // 添加点击事件，通过增加删除 _saved 中对应 pair 元素来达到切换效果 onTap: () { // setState 之后会重新 build 组件 setState(() { if (alreadySaved) { _saved.remove(pair); } else {  _saved.add(pair);  }  }); },  ); }
...
}


移动端开发之 Flutter APP 开发初体验

效果图

3.导航到新页面

APP顶栏添加一个按钮和点击事件。

Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('单词本'), // 添加一个动作组件 IconButton，列表按钮，按下的事件是 _pushSaved actions: <Widget>[ IconButton(icon: Icon(Icons.list), onPressed: _pushSaved), ],  ), body: _buildSuggestions() ); }
void _pushSaved() { // 导航切换视图 Navigator.of(context).push( MaterialPageRoute<void>( builder: (BuildContext context) { final Iterable<ListTile> tiles = _saved.map( (WordPair pair) { return ListTile( title: Text( pair.asPascalCase, style: _biggerFont, ), ); }, ); final List<Widget> divided = ListTile .divideTiles( context: context, tiles: tiles, ) .toList(); return Scaffold(  appBar: AppBar( title: Text('Saved Suggestions'), ), body: ListView(children: divided), );  }, ), );}

移动端开发之 Flutter APP 开发初体验移动端开发之 Flutter APP 开发初体验

右侧图片展示的就是跳转到新的导航页面，收藏夹页面展示我们收藏的单词。

请注意，导航器会在应用顶栏中添加“后退”按钮。我们不必显式实现Navigator.pop。点击后退按钮就可以返回到主路线。

4.修改顶栏颜色

class MyApp extends StatelessWidget { // 应用的根组件 @override Widget build(BuildContext context) { return MaterialApp( title: '欢迎使用新青柚天气', theme: ThemeData( primarySwatch: Colors.teal, ), home: RandomWords(), ); }}

移动端开发之 Flutter APP 开发初体验移动端开发之 Flutter APP 开发初体验

Tips

  1. 某些窗口小部件属性采用单个窗口小部件（子窗口）child，而其他属性（如操作）则采用窗口小部件（子窗口）数组children，如方括号（[]）所示。


本次提交代码

可以在语雀看到本文：

https://www.yuque.com/zhouyang-kk2um/flutter


文章参考资料：

  1. https://flutter.dev/docs/get-started/

  2. https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/

拓展学习：

  1. https://flutter.dev/docs/development/ui/widgets-intro

  2. https://flutterchina.club/widgets-intro/

  3. https://flutter-io.cn/

  4. https://book.flutterchina.club/chapter14/flutter_app_startup.html

  5. https://github.com/flutter/plugins

  6. https://github.com/alibaba/flutter-go

  7. 闲鱼FLutter知识库 https://www.yuque.com/xytech/flutter


初次分享教程，不足和错误在所难免，欢迎指出，同时也欢迎大家积极讨论和交流。


你的在看是对我最大的支持和鼓励!



以上是关于移动端开发之 Flutter APP 开发初体验的主要内容，如果未能解决你的问题，请参考以下文章

Hybird App ( 混合模式移动应用)开发初体验

Flutter 爱之初体验

mui框架移动开发初体验

跨端应用Flutter初体验

Hybird开发初体验之React-Native

鸿蒙全新声明式UI框架ArkUI初体验，开发应用不错，比起flutter如何