Flutter 入门教程

文件类型: HTML 大小: 10,070 字节

demo_flutter_android

一个零基础的简单教程！

lib — 这里是写代码的

我们的代码文件后缀是 .dart

你的文件名：xxx.dart

改 App 名字

如果让 app 的名字变成中文，在这里改：

android/app/src/main/AndroidManifest.xml

用记事本打开这个文件，改这个地方就可以：

android:label="demo_flutter_android"

Gradle 配置成本地

不用重复去下载，配置成本地的。

路径是这个地方（你的项目目录）：

android\gradle\wrapper

找到这个文件，用记事本打开：

gradle-wrapper.properties

改成这样：

distributionUrl=file:///C:/gradle-8.14-all.zip

提示：我这里是放到 C 盘的，你可以参考这个路径来写。如果没有 gradle 包，可以去下面这个镜像仓库下载。

镜像仓库：

https://mirrors.cloud.tencent.com/gradle/

进去选中你需要的版本进行下载就可以了。

常用编译命令

编译 APK

在项目目录下执行：

flutter build apk

如果希望生成拆分后的 APK（减小体积），可以使用：

flutter build apk --split-per-abi

构建完成后，APK 文件位于：

build/app/outputs/flutter-apk/app-release.apk

安装到手机

flutter install

示例代码

打开 lib 文件夹，在这里写代码。

import 'package:flutter/material.dart';

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

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

  // 关闭右上角调试标签
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '弹窗 Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  // 弹出信息框
  void _showMessage(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('提示'),
          content: const Text('你好，世界！'),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('确定'),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('弹窗 Demo'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showMessage(context),
          child: const Text('点我弹窗'),
        ),
      ),
    );
  }
}