Flutter从入门到入土【总】

开心就好2025
265 阅读8分钟

Flutter 的使用

Flutter

Flutter 是谷歌基于 Dart 语言开发的一款开源、免费且跨平台 的 App 开发框架。建议先学习 Dart 语言的基本语法，它很像 JavaScript 和 Java，学起来很快。

这篇文章将直接总结如何使用 Flutter 框架，内容较长，但讲解的内容较为简洁。

环境配置

安装 JDK

  1. 前往 Java Downloads | Oracle 下载所需要的 JDK，JDK17 版本足够使用。
  2. 配置系统环境：
    • 新建系统变量，第一行输入 JAVA_HOME，第二行输入安装 JDK 的目录。
    • 在系统变量中找到 Path，双击打开，点击新建，并输入 %JAVA_HOME%\bin。
    • 一直点确定，然后在 cmd 中输入 java -version，一般来说会出现版本号。如果不行，重启电脑，若还不行，重新安装。

安装 Android Studio

  1. 前往 下载 Android Studio，并安装。
  2. 安装完毕后，点击左边的第三项，插件，搜索并安装以下两个插件，然后重启 Android Studio：
    • Flutter
    • Dart

安装 Flutter SDK

  1. 前往 Flutter 官网下载 Flutter SDK，Flutter SDK archive | Flutter。
  2. 将下载好的压缩包解压，然后配置环境，双击系统变量的 Path，新建并输入刚刚解压到的文件夹到 bin 目录的路径。
  3. 在 cmd 中输入 flutter doctor，等待一下，出现这些信息：
    • 前三项和倒数三项不是 x 一般就能用，如果第三项出现问题，先安装 Android Studio。
  4. 常见问题：
    • 如果 flutter doctor 时出现 cmdline-tools component is missing，根据以下步骤：
      1. 打开 Android Studio，关闭项目，到开始页面，点最右边的竖着的三个点，选择 SDK Manager。
      2. 点第二项 SDK Tools，在下面找到 Android SDK Command-line Tools 并勾选，点击确定。
      3. 等待下载完成，点击完成。

使用 Appuploader 简化 iOS 开发流程

在 Flutter 开发中，iOS 的打包和上传流程可能会比较复杂。为了简化这一过程，可以使用 Appuploader，这是一款专为 iOS 开发者设计的工具，能够帮助开发者快速打包、上传和发布应用到 App Store。

Appuploader 的主要功能

  • 一键打包：自动生成 iOS 应用的 IPA 文件。
  • 自动上传：支持一键上传到 App Store Connect。
  • 证书管理：自动管理开发证书和发布证书，避免手动配置的繁琐。
  • 简化流程：减少手动操作，提升开发效率。

如何使用 Appuploader

  1. 下载并安装：前往 Appuploader 官网 下载并安装工具。
  2. 配置项目：打开 Appuploader，选择你的 Flutter 项目路径，工具会自动识别项目配置。
  3. 打包 IPA：点击“打包”按钮，Appuploader 会自动生成 IPA 文件。
  4. 上传到 App Store：打包完成后，点击“上传”按钮，工具会自动将 IPA 文件上传到 App Store Connect。

通过使用 Appuploader，开发者可以大大减少在 iOS 打包和上传上的时间消耗，专注于 Flutter 应用的开发。

创建 Flutter 项目并运行

创建

  1. 一切准备好之后，会看到 Android Studio 右上角有个 New Flutter Project 的按钮，点击这个按钮是为了创建 Flutter 项目。
  2. 点进去之后，右边点击 Flutter，然后下一步。
  3. 这里就是项目的基本信息：
    • 项目名称：随便你想怎么起怎么起。
    • 项目路径：看你想放哪。
    • 项目描述：这一条无所谓。
    • 项目类型：想做 app 就选 Application。
    • 所属组织：随你。
    • 安卓系统的编译语言：一般选第二项。
    • IOS 系统的编译语言：一般选第二项。
    • 所在平台：一般全选。
  4. 填好之后，点左下角创建。
  5. 最后，我们需要编写的文件，就在 lib 里。

运行

先点击右上角的手机图标，然后选择 Edge，再点击运行。如果没有这种运行，左边的项目找到项目的目录，然后点开 lib，再双击 .dart 文件，再编辑器右键点击小三角运行。

Flutter 的基本要素

  1. 创建第一个 Flutter，需要导入一个包 package:flutter/material.dart。
  2. 使用 main 函数，让它可以运行 runApp() 方法。
  3. runApp() 需要填写容器，这里先使用 Center。
  4. Center 里面需要填写 child。
  5. Text() 即是创建一个文本到 Center 里。
  6. Text 里可以有 textDirection 为让文字从左到右 [ltr] 还是从右到左 [rtl]。
  7. Text 里的 style 可以改变文字样式。
import 'package:flutter/material.dart';

// demo1-Center
void main() {
  runApp(const Center(
    child: Text(
      "hello world!",
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontSize: 20.0,
        color: Colors.brown
      ),
    )
  ));
}

MaterialApp and Scaffold

MaterialApp 常用的属性

属性名用处
home主页
title标题
color颜色
theme主题
routes路由
MaterialApp-home

填写容器，一般以 Scaffold 为主，Scaffold 是与 MaterialApp 的另一种组件。

import 'package:flutter/material.dart';

// demo2-MaterialApp and Scaffold
void main(){
  runApp(MaterialApp(
    home: Scaffold()
  ));
}
MaterialApp-title|color

MaterialApp 的标题和颜色，但是一般不用。

MaterialApp-theme

整个软件的主题，填写的参数有要求：

  • ThemeData.light()：白色主题
  • ThemeData.dark()：黑色主题
import 'package:flutter/material.dart';

// demo2-MaterialApp and Scaffold
void main(){
  runApp(MaterialApp(
    theme: ThemeData.dark()
  ));
}
MaterialApp-routes

none

Scaffold 的常用属性

属性说明
appBar用于显示顶部部分
body用于显示主要内容
drawer左边抽屉菜单
Scaffold-appBar

如何使用 appBar：

import 'package:flutter/material.dart';

// demo2-MaterialApp and Scaffold
void main(){
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("demo2")
      )
  ));
}

其实 appBar 还有一些属性：

  • backgroundColor：用于设置背景颜色
  • centerTitle：是否居中文字
import 'package:flutter/material.dart';

// demo2-MaterialApp and Scaffold
void main(){
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("demo2")
      ),
      backgroundColor: Colors.lightGreen,
      centerTitle: true,
    )
  ));
}
Scaffold-body

主体部分，填写容器就行了，这里用了 Center。

import 'package:flutter/material.dart';

// demo2-MaterialApp and Scaffold
void main(){
  runApp(MaterialApp(
    home: Scaffold(
      body: const Center(
        child: Text(
          "Hello world!",
          textDirection: TextDirection.ltr,
          style: TextStyle(
              color: Colors.greenAccent,
              fontSize: 30.0
          ),
        ),
      ),
    )
  ));
}
Scaffold-drawer
  1. 编写一个简单的界面：
import 'package:flutter/material.dart';

// demo4-Drawer
void main(){
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text(
            "demo4-Drawer",
            textDirection: TextDirection.ltr
        ),
        backgroundColor: Colors.blue,
        titleTextStyle: const TextStyle(
            color: Colors.amber
        ),
      ),
      drawer:
    ),
  ));
}
  1. darwer 需要填写与之相应的 Darwer()，里面常用的两个属性：
  • backgroundColor：抽屉菜单的背景颜色
  • child：抽屉菜单的内容
import 'package:flutter/material.dart';

// demo4-Drawer
void main(){
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text(
            "demo4-Drawer",
            textDirection: TextDirection.ltr
        ),
        backgroundColor: Colors.blue,
        titleTextStyle: const TextStyle(
            color: Colors.amber
        ),
      ),
      drawer: const Drawer(
        backgroundColor: Colors.lightBlue,
        child: Text(
          "DrawerTitle",
          textDirection: TextDirection.ltr,
          style: TextStyle(
            color: Colors.greenAccent,
            fontSize: 30.0,
          ),
        ),
      ),
    ),
  ));
}
  1. 总体代码：
import 'package:flutter/material.dart';

// demo4-Drawer
void main(){
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text(
            "demo4-Drawer",
            textDirection: TextDirection.ltr
        ),
        backgroundColor: Colors.blue,
        titleTextStyle: const TextStyle(
            color: Colors.amber
        ),
      ),
      body: HomeComp(),
      drawer: const Drawer(
        backgroundColor: Colors.lightBlue,
        child: Text(
          "DrawerTitle",
          textDirection: TextDirection.ltr,
          style: TextStyle(
            color: Colors.greenAccent,
            fontSize: 30.0,
          ),
        ),
      ),
    ),
  ));
}

class HomeComp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        "Hello world",
        textDirection: TextDirection.ltr,
        style: TextStyle(
          color: Colors.green,
        ),
      ),
    );
  }
}

分离组件

我们在编写软件的时候，不会把所有的东西功能和界面全部写在一起，那样会让我们看起来很烦躁，因为非常的乱。

  1. 先编写一个普通的界面，现在，代码是报错的，因为 body 还没有填写东西：
import 'package:flutter/material.dart';

// demo3-分离组件
void main(){
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("demo3-分离组件"),
        backgroundColor: Colors.blue,
        titleTextStyle: const TextStyle(
          color: Colors.amber
        ),
      ),
      body: ,
    ),
  ));
}
  1. 在 main 方法下面，编写一个组件类，让这个类继承 StatelessWidget，此时会报错，将鼠标放上去，让系统自动帮你把方法写出来。
class HomeComp extends StatelessWidget{
  const HomeComp({super.key});
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        "Hello world",
        style: TextStyle(
          color: Colors.green,
        ),
      ),
    );
  }
}
  1. 总体代码：
import 'package:flutter/material.dart';

// demo3-分离组件
void main(){
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("demo3-分离组件"),
        backgroundColor: Colors.blue,
        titleTextStyle: const TextStyle(
          color: Colors.amber
        ),
      ),
      body: const HomeComp(),
    ),
  ));
}

class HomeComp extends StatelessWidget{
  const HomeComp({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        "Hello world",
        style: TextStyle(
          color: Colors.green,
        ),
      ),
    );
  }
}

基础组件

Container 容器组件

alignment 的参数
参数说明
Alignment.topCenter顶部居中对齐
Alignment.topLeft顶部左对齐
Alignment.topRight顶部右对齐
Alignment.center水平垂直居中对齐
Alignment.centerLeft垂直居中水平居左对齐
Alignment.centerRight垂直居中水平居右对齐
Alignment.bottomCenter底部居中对齐
Alignment.bottomLeft底部居左对齐
Alignment.bottomRight底部居右对齐
decoration 的属性

先使用 BoxDecoration()，里面的参数为：

属性说明
gradient渐变 LinearGradient() 为背景线性渐变 RadialGradient() 为径向渐变，这两个方法里面需要 color 参数，可以书数组
boxShadow阴影 需要定义一个常量数组，数组里面需要 BoxShadow()，里面有 color[颜色]、offset[位移，参数为 Offset(x, y)]、blurRadius[虚化程度]
border边框 需要使用 Border.all()，里面有 color[颜色]、width[线条大小]
borderRadius盒子圆角 需要使用 BorderRadius.circular()，参数就是 double 类型的数字
其他属性
属性说明
margin容器与外部的距离，参数使用 EdgeInsets.all(double) 或者 EdgeInsets.fromLTRB(double,double,double,double)
padding容器边框与 child 的距离，同上
transform让容器可以位移旋转
`heightwidth`容器高度和宽度
child子元素

Text 组件

textAlign 参数

文字对齐方式：

参数说明
TextAlign.center文字居中
TextAlign.left文字左对齐
TextAlign.right文字右对齐
TextAlign.justfy文字两端对齐
textDirection 参数

文字方向：

参数说明
TextDirection.ltr从左至右
TextDirection.rtl从右至左
overflow 参数

文字超出屏幕之后的处理方式：

参数说明
TextOverflow.visible强制显示
TextOverflow.clip裁剪隐藏
TextOverflow.fade渐隐
TextOverflow.ellipsis省略号
textScaler 参数

textScaleFactor 已弃用，用 textScaler 代替，用于字体显示倍率：

参数说明
TextScaler.linear(double)字体显示倍率，1 为正常
maxLines 参数

显示最大行数：

  • 填写整数即可
style 属性

需要搭配 TextStyle() 使用，以下是 TextStyle() 的属性：

  • decoration：文字的装饰线
参数说明
TextDecoration.none无线条
TextDecoration.lineThrough删除线
TextDecoration.overline上划线
TextDecoration.underline下划线
  • decorationColor：装饰线的颜色
  • decorationStyle：装饰线样式
参数说明
TextDecorationStyle.dashed横杆虚线
TextDecorationStyle.dotted点虚线
TextDecorationStyle.double双线
TextDecorationStyle.solid实线
TextDecorationStyle.wavy波浪线
  • wordSpacing：单词 间隙，负值会让单词 变得更紧凑
  • letterSpacing：字母 间隙，负值，会让字母 变得更紧凑
  • fontStyle：文字样式
参数说明
FontStyle.normal正常字体
FontStyle.italic斜体
  • fontSize：文字大小
  • color：文字颜色
  • fontWeight：文字粗细
参数说明
FontWeight.normal正常粗细
FontWeight.normal粗体
FontWeight.wx00按照整百粗细（100-900）

图片组件

图片组件分为两种：

  • Image.asset
  • Image.network
属性

两种的参数都是一样的，就是引用图片的方式不一样。

alignment：图片对齐方式

参数说明
Alignment.topCenter顶部居中对齐
Alignment.topLeft顶部左对齐
Alignment.topRight顶部右对齐
Alignment.center水平垂直居中对齐
Alignment.centerLeft垂直居中水平居左对齐
Alignment.centerRight垂直居中水平居右对齐
Alignment.bottomCenter底部居中对
avatar
文章
阅读
粉丝