用 Flutter 做个最简单的App
用Flutter 做个最简单的App,这是Flutter系列文章中的第一篇

环境准备

我日常使用的是Windows 10 操作系统, 安装了 Android Studio 最新版, 安装了 Android Studio 的 flutter 插件及 Flutter SDK , 测试下环境是否可用:


# 命令行工具中输入 

flutter doctor

回应输出如下:


Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.10.1, on Microsoft Windows [Version 10.0.19044.1826], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.10.4)
[√] Android Studio (version 2020.3)
[√] Android Studio (version 2021.2)
[√] Connected device (4 available)
[√] HTTP Host Availability

• No issues found!

没找到啥问题,那就可以继续玩。

这一步, 涉及到 Android Studio 的安装与配置, Android 虚拟机的配置,这些可以按照 Android Studio 官方文档说明操作, 这里不赘述了。

这一步,还涉及到安装 Flutter SDK, 按 Flutter 官网说明操作即可, 也不再赘述。

新建一个 Flutter 工程

打开 Android Studio , 点击左上角 File->New->New Flutter Project...,按照提示,一路搞下来就行。

在 Android Studio 右侧, 点击 Device Manager, 启动一个安卓虚拟机。新建的项目,是一个内含点击计数器功能的App工程, 点击Android Studio 上方工具栏中的绿色按钮,让这个示例工程,跑在虚拟机上,看看效果。

Flutter 采用的是 Dart 编程语言,示例项目中可以了解到,它似乎更接近于一种描述语言, 事实上,它不仅仅是一种描述语言。在稍后的文章中,会逐步介绍这种变成语言。

Flutter 以组件(widget)的形式进行UI设计,组件之间,可以是兄弟关系,也可以是主从/父子关系。

加载一张网络图片

能在安卓虚拟机上启动一个含有计数器的App之后,删除计数器相关的代码,写如下代码:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      showSemanticsDebugger: false,
      title: '祖国万岁',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: "祖国万岁"),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: Colors.blueGrey,
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image(
             image: AssetImage("images/640px-Flag_of_the_People's_Republic_of_China.svg.png"),
              // image: NetworkImage('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/640px-Flag_of_the_People%27s_Republic_of_China.svg.png'),
            ),
          ],
        ),
      ),

    );
  }
}

修改之后, 安卓虚拟机上的 App, 会自动热重载, 显示一面五星红旗。

以上代码,修改了 Flutter 示例项目中ScaffoldAppBar两个组件(widget)的背景色,让App加载了一张维基百科(网络)上的五星红旗图片。

修改配置文件,使用本地的图片资源

如果想使用本地图片,在这个App项目的根目录下,创建一个目录,比如叫images, 把图片下载到那个目录,然后,修改这个App项目根目录下的配置文件pubspec.yaml,添加如下两行:


  assets:
    - images/640px-Flag_of_the_People's_Republic_of_China.svg.png

然后,将代码中加载图片相关的代码,做如下更改:



image: AssetImage("images/640px-Flag_of_the_People's_Republic_of_China.svg.png"),
 // image: NetworkImage('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/640px-Flag_of_the_People%27s_Republic_of_China.svg.png'),

yaml是一种描述语言,在编程中常用,由于它依赖缩进表示主从关系,所以我更喜欢toml这种配置语言,但 Flutter 选择了yaml,这里也提一嘴。

生成App的图标

准备一张作为App 图标的图片,最好是方形的,尺寸不小于1024x1024像素。借助下面的网站,生成 App 图标:


https://appicon.co/

将准备好的App 图标的原图,拖放到上面网站的上传栏, 可以下载到一个压缩包,内含Android及 iOS 适用的App 图标, 并做好了目录归类, 可直接解压到App下的对应目录即可, 对于 Android 应用,解压到相对于项目根目录的


\android\app\src\main\res

目录下即可。

更改下安装后的 App 的名称

默认的, Flutter以创建项目时的名称作为App安装后,显示在手机桌面上的名称,如想更改,修改\android\app\src\main\AndroidManifest.xml中的


 android:label="祖国万岁"

为你想要的安装后的App的名称即可。

build 为 apk

点击Android Studio 主菜单Build,然后Flutter->Build APK,构建成功后,可见到Android Studio 下方输出


√  Built build\app\outputs\flutter-apk\app-release.apk (15.9MB).
Process finished with exit code 0

安装到真机上测试下

没啥问题,那就行了。

总结

本文简单介绍了如何在 Android Studio 中创建一个 Flutter 工程, 如何修改工程的配置文件及加载本地的图片资源,如何生成 App 图标及更改App 安装后,显示在桌面上的名称。还介绍了如何编译为 Android apk。

Flutter SDK 含有 N 多内置组件, 在其相关网站,又有 N 多的第三方组件, 在稍后的文章中,将会陆续介绍。


最后修改于 2022-08-07

禁止评论