首页手记 Flutter常用功能资料：初学者的全面指南

Flutter常用功能资料：初学者的全面指南

标签：

杂七杂八

概述

此文章全面介绍了Flutter开发框架，从快速入门到构建应用，包括安装配置、实现基本界面、管理布局与导航、添加交互元素、响应式设计、状态管理，以及网络请求与API集成。读者将学习如何使用Flutter构建跨平台应用，掌握从基础到进阶的开发技巧。通过实践代码示例，了解如何创建动态、美观且适应多种设备的高质量应用。文章内容丰富，旨在帮助开发者高效地利用Flutter功能，提升应用开发效率和用户体验。

快速入门Flutter

Flutter简介

Flutter 是由 Google 开发的开源移动应用开发框架，旨在用 Dart 语言编写一次代码，跨平台在 Android、iOS、macOS、Windows、Linux 及 web 上运行应用。通过 Flutter，开发者能构建高度交互的用户界面，实现快速迭代和应用发布。

安装与环境配置

安装 Dart

访问 Dart 官网下载最新版的 Dart SDK，并按照提示进行安装。

配置 Flutter

下载 Flutter SDK 并解压到一个目录（例如：~/flutter）。接下来，需要设置环境变量以便在任何终端中使用 Flutter 命令。在 ~/.bashrc 文件中添加以下代码：

export PATH="$PATH:~/flutter/bin"

保存并关闭文件，然后运行 source ~/.bashrc 使环境变量生效。

创建项目

使用 flutter create 命令创建一个新的 Flutter 项目：

flutter create my_flutter_app

这将在当前目录下生成一个名为 my_flutter_app 的新项目。

第一个Flutter应用：Hello, World!

打开项目目录，使用 code . 命令打开项目文件夹，并用代码编辑器打开 lib/main.dart 文件。

在 main.dart 文件中，替换内容为：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello, World!',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello, Flutter!'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

保存文件。运行以下命令：

cd my_flutter_app
flutter run

现在，一个简单的 Flutter 应用将显示在模拟器或连接的设备上，标题为 "Hello, Flutter!"。

构建基本界面

使用Widgets创建界面

在 Flutter 中，界面是通过一系列称为 Widgets 的小部件组成的。这些小部件是构建应用界面的基本组件，如 Text、Button、Image、ListView 等。

实现基本界面

在 lib/main.dart 文件中将代码更新为：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Basic Flutter App',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Flutter App'),
      ),
      body: Column(
        children: [
          Text('Welcome to Flutter!'),
          Container(
            width: double.infinity,
            height: 200.0,
            color: Colors.blue,
          ),
          ElevatedButton(
            onPressed: () {},
            child: Text('Click Me!'),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Icon(Icons.star),
              Icon(Icons.thumb_up),
              Icon(Icons.share),
            ],
          ),
        ],
      ),
    );
  }
}

运行 flutter run 命令，应用将显示欢迎信息、蓝色背景区域、按钮及图标。

管理屏幕布局与导航

屏幕布局

在 Flutter 中，Scaffold 是构建复杂布局的基本小部件。它包含了应用的主体屏幕、工具栏（AppBar）和抽屉菜单等组件。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Demo',
      home: NavigationPage(),
    );
  }
}

class NavigationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Navigation Demo'),
      ),
      body: Column(
        children: [
          RaisedButton(
            onPressed: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            ),
            child: Text('Navigate to Second Page'),
          ),
          RaisedButton(
            onPressed: () => Navigator.pop(context),
            child: Text('Go back'),
          ),
        ],
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('You are on the second page!'),
      ),
    );
  }
}

运行应用，点击“Navigate to Second Page”按钮将跳转到第二个页面，点击“Go back”按钮返回上一页。

添加交互元素：按钮、文本框

在 MyHomePage 类中添加以下代码：

class MyHomePage extends StatelessWidget {
  static String inputText = '';

  TextEditingController TextFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Flutter App'),
      ),
      body: Column(
        children: [
          TextField(
            controller: TextFieldController,
            decoration: InputDecoration(labelText: 'Enter text'),
          ),
          ElevatedButton(
            onPressed: () => inputText = TextFieldController.text,
            child: Text('Click Me!'),
          ),
          Text('Input: ${inputText}'),
        ],
      ),
    );
  }
}

更新 MyHomePage 类的按钮代码：

ElevatedButton(
  onPressed: () => inputText = TextFieldController.text,
  child: Text('Click Me!'),
),

运行应用，用户现在可以输入文本并点击按钮将文本保存在 inputText 变量中。

响应式设计

响应式布局的基础

在 Flutter 中，使用 MediaQuery 和其相关属性来处理不同屏幕尺寸和设备特性。这允许开发者创建适应多种设备的自适应布局。

使用 MediaQuery 进行屏幕适配

在 MyHomePage 类中添加以下代码：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Flutter App'),
      ),
      body: Column(
        children: [
          ...，
          Container(
            width: MediaQuery.of(context).size.width * 0.8,
            height: 100.0,
            color: Colors.blue,
          ),
          ...，
        ],
      ),
    );
  }
}

这段代码中的 MediaQuery.of(context) 获取当前上下文的屏幕尺寸信息。使用 size.width 获取屏幕宽度，然后根据设备宽度设置容器的宽度，实现响应式设计。

运行应用，观察屏幕尺寸变化时布局的自适应效果。

实现自适应布局设计

为了实现更加复杂的自适应布局设计，可以组合使用 Stack、Row、Column 等小部件，并利用 AspectRatio、Align 等辅助小部件来控制尺寸和对齐方式。

例如，创建一个响应式导航栏：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Flutter App'),
      ),
      body: Column(
        children: [
          ...，
          Container(
            width: MediaQuery.of(context).size.width * 0.8,
            height: 100.0,
            color: Colors.blue,
          ),
          ...，
        ],
      ),
    );
  }
}

通过上述代码，开发者可以构建出适应不同屏幕尺寸的美观且功能丰富的 Flutter 应用界面。

状态管理

理解状态管理的重要性

Flutter 应用通常需要维护一些状态以实现交互功能。状态管理在应用的生命周期中至关重要，它确保应用从初始状态开始，随着用户的操作和数据的更新而适应变化。

使用 Provider 进行状态管理

在 Flutter 中，使用 Provider 库来实现状态管理。Provider 是一个用于在 Flutter 中实现状态管理的库，它提供了一种简单的方式来访问和管理应用状态。

首先，需要通过 pubspec.yaml 文件添加 Provider 依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

运行 flutter pub get 更新项目依赖。

在 lib 目录下创建一个名为 store 的新目录，并在其中添加一个名为 app_state.dart 的文件：

import 'package:provider/provider.dart';

class AppState {
  String _greeting = 'Hello';

  String get greeting => _greeting;

  void setGreeting(String text) {
    _greeting = text;
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(
          value: AppState(),
        ),
      ],
      child: MyAppWidget(),
    );
  }
}

创建 MyAppWidget 构建器类：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'app_state.dart';

class MyAppWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'State Management Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('State Management Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  Provider.of<AppState>(context, listen: false).setGreeting('Hello, World!');
                },
                child: Text('Change Greeting'),
              ),
              Text('Greeting: ${Provider.of<AppState>(context).greeting}'),
            ],
          ),
        ),
      ),
    );
  }
}

现在，应用已经实现了基本的状态管理功能，用户可以通过按钮改变问候语，响应式布局确保了设备适应性。

实现数据持久化：SQLite数据库

为了实现数据持久化，可以使用 sqflite 库。首先添加依赖：

dependencies:
  flutter:
    sdk: flutter
  sqflite: ^2.0.0+3

运行 flutter pub get 命令更新依赖。

创建一个名为 database_helper.dart 的新文件，并添加以下代码：

import 'package:path/path.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path_provider/path_provider.dart';

class DatabaseHelper {
  static final DatabaseHelper _instance = DatabaseHelper();
  static Database _database;

  DatabaseHelper() {
    _initDatabase();
  }

  Future<void> _initDatabase() async {
    final directory = await getApplicationDocumentsDirectory();
    final String path = join(directory.path, 'my_database.db');
    _database = await openDatabase(
      path,
      version: 1,
      onCreate: (db, version) async {
        await db.execute('''
          CREATE TABLE users (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            username TEXT NOT NULL,
            email TEXT NOT NULL
          )
        ''');
      },
    );
  }

  Future<Database> get database => _database!;
}

接下来，在 MyAppWidget 类中使用 DatabaseHelper 来插入和查询数据：

class MyAppWidget extends StatelessWidget {
  static final DatabaseHelper _databaseHelper = DatabaseHelper();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Database Management Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Database Management Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () async {
                  await _databaseHelper.insertUser('John Doe', 'john@example.com');
                },
                child: Text('Insert User'),
              ),
              ElevatedButton(
                onPressed: () async {
                  var users = await _databaseHelper.getAllUsers();
                  print('Users: $users');
                },
                child: Text('Get All Users'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

运行应用，可以看到已添加的数据被成功存储到 SQLite 数据库中，并可以进行查询操作。

网络请求与API集成

使用 http 包进行网络请求

在 Flutter 中，使用 http 包来处理 HTTP 请求和响应。首先，确保通过 pubspec.yaml 添加依赖：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

运行 flutter pub get 更新依赖。

集成第三方 API 实现数据展示

假设有一个 API 提供天气数据，如下：

{
  "id": "1234",
  "main": {
    "temp": 28.5,
    "humidity": 65
  },
  "weather": [
    {
      "id": "800",
      "description": "Clear"
    }
  ],
  "name": "London"
}

创建一个名为 weather_api.dart 的新文件，包含以下代码：

import 'dart:convert';
import 'package:http/http.dart' as http;

class WeatherApi {
  static final apiUrl = 'https://api.openweathermap.org/data/2.5/weather';
  static final apiKey = 'your_api_key_here';

  static Future<dynamic> getWeather(String city) async {
    final response = await http.get(
      '$apiUrl?q=$city&appid=$apiKey',
      headers: {'Accept': 'application/json'},
    );

    if (response.statusCode == 200) {
      return jsonDecode(response.body);
    } else {
      throw Exception('Failed to load weather data');
    }
  }
}

接下来，在 MyAppWidget 类中使用 WeatherApi 来获取天气数据：

class MyAppWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Weather Data Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Weather Data Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () async {
                  var weatherData = await WeatherApi.getWeather('London');
                  print('Weather: $weatherData');
                },
                child: Text('Get Weather'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

运行应用，用户点击按钮后，应用将调用 API 获取伦敦的天气数据，并展示在控制台上。

错误处理与重试机制

确保有适当的错误处理机制以防止应用在遇到网络问题时崩溃。在 getWeather 方法中添加异常处理：

static Future<dynamic> getWeather(String city) async {
  final response = await http.get(
    '$apiUrl?q=$city&appid=$apiKey',
    headers: {'Accept': 'application/json'},
  );

  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else {
    throw Exception('Failed to load weather data');
  }
}

同时，可以实现重试机制，当网络请求失败时，在一定次数后重新尝试：

static Future<dynamic> getWeatherWithRetry(String city, int maxAttempts) async {
  for (int attempt = 1; attempt <= maxAttempts; attempt++) {
    try {
      return await getWeather(city);
    } catch (e) {
      if (attempt == maxAttempts) {
        throw e;
      } else {
        await Future.delayed(Duration(seconds: 1)); // 等待1秒后重试
        print('Retrying in attempt $attempt...');
      }
    }
  }
}

发布应用

Flutter 应用发布流程

发布 Flutter 应用到 Google Play 或 Apple App Store，需要准备以下步骤：

创建开发者账号：访问 Google Play 商店或 Apple App Store 开发者网站注册账号并完成身份验证。
获取并配置证书：
- Google Play：按照官方文档获取 Google Play 证书，并将其添加到项目中。
- Apple App Store：生成 iOS 开发者证书，确保证书具有发布权限。
创建 App Bundle：
- 使用 flutter build 命令构建应用的 APK 或 IPA 文件。
- Google Play：构建 flutter build apk 生成 app-release.apk。
- Apple App Store：构建 flutter build ios --configuration Release 生成 Runner.app。
上传应用包：
- Google Play：使用与开发者账号关联的 Google Play 控制台上传应用包。
- Apple App Store：使用 Xcode 上传应用到 Apple App Store 审核系统。
提交应用：
- Google Play：填写应用详情和元数据，提交应用供 Google Play 审核。
- Apple App Store：等待 Apple 审核团队审查应用包，通过后上架应用。

通过以上步骤，开发者可以构建、测试、发布和推广基于 Flutter 开发的应用程序。随着 Flutter 的不断发展和社区的壮大，开发者可以随时探索更多功能和插件，持续优化应用体验。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

千万里不及你

手记
篇

粉丝

51

获赞与收藏

237

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30787 345

网络编程入门教程

20个小节 12720 239

Pandas 入门教程

25个小节 18599 341

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空