「 Flutter」环境配置与快速上手

掘掘子
502 阅读4分钟

这是我参与11月更文挑战的13天，活动详情查看：2021最后一次更文挑战

搭建运行环境

  1. 安装并配置 JDK

  2. 下载安装 Android Studio

    下载网址：Download Android Studio and SDK tools

    安装到自定义目录

  3. 下载配置 Flutter SDK

    下载网址：Windows install | Flutter

    安装到自定义目录后，把 Flutter 安装目录的 bin 目录配置到 path 环境变量

    命令行输入 flutter -v 检查是否配置成功

  4. 配置 Flutter 国内镜像

    方法是将配置下面两条环境变量：

    FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn 
PUB_HOSTED_URL: https://pub.flutter-io.cn

  5. 运行 flutter doctor 命令检测环境是否配置成功

    可能会遇到的问题：cmdline-tools component is missing

    运行 flutter doctor --android-licenses 后全部选择 y

    再次运行 flutter doctor 显示如下信息则表示配置成功：

    Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1348], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] IntelliJ IDEA Ultimate Edition (version 2021.1)
[√] Connected device (2 available)

• No issues found!

  6. 在 Android Studio 配置 Flutter 插件

    打开 Android Studio，选择 Plugins -> Maketplace，搜索并安装 Flutter 插件

  7. 创建 Flutter 项目

    New Flutter Project -> Flutter -> 设置 Flutter SDK -> 设置项目信息 -> Finish

  8. 在 Android Studio 中导入运行 Flutter 项目

    导入项目文件夹中的 android 文件夹，等待下载 gradle

  9. 在手机上调试

    用数据线连接手机和电脑，开启手机的调试模式并允许 USB 安装

    在 Android Studio 中选择 run -> run 'app' ，会在手机上安装应用

    打开应用（下图是默认的应用样式）：

image.png

在 VsCode 中开发

在 VsCode 中安装 Flutter 和 Flutter Widget Snippets 插件。

打开 Flutter 项目的文件夹，在终端中使用flutter run 命令来运行项目（运行时手机不要锁屏）。

在终端中按下下列按键可实现相应效果：

r 键：点击后热加载，即重新加载。 
R 键：点击后重新启动。
p 键：显示网格，可以让开发者掌握布局情况。
o 键：切换 android 和 iOS 等预览模式。
q 键：退出调试预览模式。

Hello Flutter & 基本控件

目录结构

android：android 平台相关代码
ios：iOS 平台相关代码
lib：flutter 相关代码，是我们主要编写的代码
test：测试代码
pubspec.yaml：配置文件，一般存放一些第三方库的依赖

入口文件

Flutter 的入口文件是 lib/main.dart：

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

main 方法是 Dart 的入口方法，runApp 是 Flutter 的入口方法， Myapp 是自定义的控件。

使用 Center 控件

首先导入 Flutter 包，可以输入快捷指令 fimpmat：

import 'package:flutter/material.dart';

Center 控件将其子 widget 居中显示在自身内部的 widget：

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

void main() {
  runApp(Center(
      child: Text(
    'Hello Flutter',
    textDirection: TextDirection.ltr,
  )));
}

在 Center 控件中使用了 Text 子控件。

**Ctrl + 鼠标左键 点击控件名查看控件的源码，了解传递的参数。 **

抽离控件

由于直接在 runApp 中写控件内容使得代码不够清晰，我们需要将 runApp 中的内容抽离出来单独作为一个控件。

Flutter 中自定义控件是一个类，它们必须继承 StatelessWidget 或 StatefulWidget 这两个抽象类。

StatelessWidget 是无状态控件，状态不可变
StatefulWidget 是有状态控件，状态可能在 widget 生命周期中改变

我们需要实现抽象类中的抽象方法，点击快速修复可以看到我们需要实现 bulid 方法，它需要返回一个 widget 。我们将原来 runApp 中的参数写到 build 方法中的返回参数中，并在 runApp 中使用自定义控件。

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

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

class MyAPP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Text(
      'Hello Flutter',
      textDirection: TextDirection.ltr,
    ));
  }
}

image.png

Text 控件

我们可以给对 Text 控件中的内容进行修改。

class MyAPP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Text(
      'Hello Flutter',
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontSize: 40.0,
        color: Colors.yellow,
      ),
    ));
  }
}

装饰 App

MaterialApp 控件

MaterialApp 封装了应用程序实现 Material Design 所需要的一些 widget。一般作为顶层 widget 使用。

常用属性：home 主页、title 标题、color 颜色、theme 主题、routes 路由……

Scaffold 控件

Scaffold 是 Material Design 布局结构的基本实现，它的中文意思是脚手架。此类提供了用于显示 drawer、snackbar 和底部 sheet 的 API。

常用属性：

appBar - 显示在界面顶部的一个 AppBar
body - 当前界面所显示的主要内容 Widget
drawer - 抽屉菜单控件

在原来的代码中使用这两个控件：

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

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

class MyAPP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello Flutter',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 40.0,
          color: Colors.yellow,
        ),
      ),
    );
  }
}

image.png

avatar
文章
阅读
粉丝