首页手记 Flutter常用功能教程：新手入门指南

Flutter常用功能教程：新手入门指南

标签：

前端工具

本文提供了详细的Flutter常用功能教程，涵盖环境搭建、布局与UI设计、导航与路由管理、状态管理入门、数据获取与网络请求以及保存用户数据等内容，帮助开发者快速上手Flutter开发。

Flutter简介及环境搭建

Flutter是什么

Flutter是Google开发的一套开源UI软件开发工具包，支持创建高性能、美观的原生应用程序，可在iOS和Android上运行。Flutter使用Dart语言编写，可以利用它的热重载特性快速迭代开发。

开发环境搭建步骤

安装Flutter SDK

下载Flutter SDK：访问Flutter官网，下载适合的操作系统版本。
解压下载的SDK包到安装目录。

安装Dart SDK

Flutter依赖于Dart语言，因此你需要安装Dart SDK。

下载并安装Dart SDK。
配置环境变量：将Dart SDK的bin目录添加到系统PATH中。

配置Android环境

安装Android Studio并配置Android SDK。
安装Android SDK命令行工具、Android SDK Platform-Tools以及Android SDK Build-Tools。
配置环境变量：将Android SDK的路径添加到系统PATH中。

配置iOS环境

对于Mac用户：

安装Xcode。
配置环境变量：将Xcode的路径添加到系统PATH中。

对于Windows/Linux用户：

由于Flutter目前不支持在Windows/Linux上直接开发iOS应用，因此需要借助模拟器或者Mac机器。

安装Flutter命令行工具

安装Flutter命令行工具，确保Flutter命令行工具位于PATH环境变量中。
运行flutter doctor命令，检查是否安装成功并配置正确。

创建Flutter环境

创建Flutter环境通常需要以下步骤：

初始化Flutter环境：在命令行输入flutter doctor，确保安装的Flutter版本和环境配置无误。
创建Flutter项目：使用flutter create project_name命令创建一个新的Flutter项目。

第一个Flutter项目创建

创建一个新的Flutter项目，首先在命令行中运行以下命令：

flutter create first_flutter_app

这将创建一个新的目录first_flutter_app，其中包含项目的基本结构。

项目结构

创建的项目结构大致如下：

first_flutter_app/
├── android/
├── ios/
├── lib/
│   └── main.dart
├── pubspec.yaml
└── test/

运行项目

运行项目可以使用以下命令：

cd first_flutter_app
flutter run

这将启动默认的模拟器或连接的设备并运行应用。

布局与UI设计

常用布局组件介绍

Container

Container是最常用的布局组件，可以设置背景颜色、边框、内边距等。它是其他组件的基础。

Container(
  color: Colors.blue,
  padding: EdgeInsets.all(16),
  child: Text("Hello World"),
)

Column

Column用于垂直排列子组件，子组件会依次从上到下排列。

Column(
  children: [
    Text("Row 1"),
    Text("Row 2"),
    Text("Row 3"),
  ],
)

Row

Row用于水平排列子组件，子组件会依次从左到右排列。

Row(
  children: [
    Text("Column 1"),
    Text("Column 2"),
    Text("Column 3"),
  ],
)

Stack

Stack用于在二维空间中重叠多个子组件，可以设置子组件的位置。

Stack(
  children: [
    Positioned(
      top: 0,
      left: 0,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.red,
      ),
    ),
    Positioned(
      top: 100,
      left: 100,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.green,
      ),
    ),
  ],
)

ListView

ListView用于创建可滚动的列表，可以垂直滚动或水平滚动。

ListView(
  children: [
    ListTile(
      title: Text("Item 1"),
    ),
    ListTile(
      title: Text("Item 2"),
    ),
    ListTile(
      title: Text("Item 3"),
    ),
  ],
)

Expanded

Expanded用于在Column或Row中分配剩余的空间给子组件。

Column(
  children: [
    Text("Fixed Size"),
    Expanded(
      child: Text("Expand to fill space"),
    ),
  ],
)

布局实战：创建一个简单的登录界面

登录界面通常包含输入框、按钮等组件。下面我们将使用Flutter框架创建一个简单的登录界面。

创建登录界面布局

import 'package:flutter/material.dart';

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

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

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login() {
    // 登录逻辑
    print(_usernameController.text);
    print(_passwordController.text);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(
                labelText: 'Username',
              ),
            ),
            TextField(
              controller: _passwordController,
              obscureText: true,
              decoration: InputDecoration(
                labelText: 'Password',
              ),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _login,
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

导航与路由管理

Flutter中的导航机制

Flutter使用Navigator来管理页面的导航。每个页面都是一个路由，通过Navigator可以实现页面的切换。

页面跳转

使用Navigator.push方法可以实现页面的跳转。

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewPage()),
)

返回页面

使用Navigator.pop方法可以实现页面的返回。

Navigator.pop(context);

使用命名路由

为每个路由提供一个名称，可以方便地管理和跳转。

// 定义路由名称
final String routeName = '/new-page';

// 跳转到命名路由
Navigator.pushNamed(context, routeName);

创建简单的导航应用

我们将创建一个简单的导航应用，包含主页和详情页。

创建主页

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/detail': (context) => DetailPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/detail');
          },
          child: Text('Go To Detail'),
        ),
      ),
    );
  }
}

创建详情页

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Back To Home'),
        ),
      ),
    );
  }
}

状态管理入门

状态管理的重要性

在Flutter开发中，状态管理是处理应用状态变更的关键。通过状态管理，可以实现组件状态更新、数据同步等功能。良好的状态管理可以提升应用性能，改善用户体验。

常见状态管理方案

Provider: 简单高效的状态管理，基于Provider库实现。
BLoC: 业务逻辑组件，适用于复杂状态管理需求。
Riverpod: Provider的替代品，提供了更多的功能和灵活性。

使用Provider进行状态管理

Provider是一种简单高效的状态管理方案，适用于大多数应用的状态管理需求。

基本使用

首先，定义一个状态类。

import 'package:flutter/material.dart';

class CounterModel with ChangeNotifier {
  int counter = 0;

  void increment() {
    counter++;
    notifyListeners();
  }
}

提供状态

使用Provider提供状态。

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

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (context) => CounterModel(),
        ),
      ],
      child: MyApp(),
    ),
  );
}

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

消费状态

在需要使用状态的地方，通过Consumer获取状态。

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider'),
      ),
      body: Center(
        child: Consumer<CounterModel>(
          builder: (context, model, child) {
            return Text(
              '${model.counter}',
              style: Theme.of(context).textTheme.headline1,
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read<CounterModel>().increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

复杂场景示例

在复杂场景中，Provider可以处理异步状态更新或状态更新的连锁反应。例如，当数据从服务器获取后更新UI，或者多个组件需要协同更新状态。

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

class AsyncCounterModel with ChangeNotifier {
  bool _isLoading = false;
  int _counter = 0;

  bool get isLoading => _isLoading;
  int get counter => _counter;

  Future<void> fetchCounter() async {
    _isLoading = true;
    notifyListeners();

    final dio = Dio();
    final response = await dio.get('https://api.example.com/counter');

    if (response.statusCode == 200) {
      _counter = response.data['counter'];
      _isLoading = false;
      notifyListeners();
    } else {
      _isLoading = false;
      notifyListeners();
    }
  }
}

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (context) => AsyncCounterModel(),
        ),
      ],
      child: MyApp(),
    ),
  );
}

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider'),
      ),
      body: Center(
        child: Consumer<AsyncCounterModel>(
          builder: (context, model, child) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  model.isLoading ? 'Loading...' : '${model.counter}',
                  style: Theme.of(context).textTheme.headline1,
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: model.isLoading ? null : model.fetchCounter,
                  child: Text('Fetch Counter'),
                ),
              ],
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read<AsyncCounterModel>().fetchCounter();
        },
        tooltip: 'Fetch Counter',
        child: Icon(Icons.refresh),
      ),
    );
  }
}

数据获取与网络请求

HTTP请求基础

HTTP请求是网络通信的基础，Flutter中可以使用Dio库或HttpClient来实现HTTP请求。

安装Dio

在pubspec.yaml文件中添加Dio依赖：

dependencies:
  dio: ^4.0.0

发送GET请求（Dio）

import 'package:dio/dio.dart';

Future<void> fetchUser() async {
  final dio = Dio();
  final response = await dio.get('https://api.github.com/users/flutter');

  if (response.statusCode == 200) {
    print(response.data);
  } else {
    print('Request failed with status code: ${response.statusCode}');
  }
}

发送POST请求（Dio）

import 'package:dio/dio.dart';

Future<void> createUser() async {
  final dio = Dio();
  final response = await dio.post('https://api.example.com/users', data: {
    'name': 'John Doe',
    'email': 'john@example.com',
  });

  if (response.statusCode == 201) {
    print(response.data);
  } else {
    print('Request failed with status code: ${response.statusCode}');
  }
}

发送GET请求（HttpClient）

import 'dart:convert';
import 'dart:io';

Future<void> fetchUser() async {
  final httpClient = HttpClient();
  final request = await httpClient.getUrl(Uri.parse('https://api.github.com/users/flutter'));
  final response = await request.close();
  if (response.statusCode == HttpStatus.ok) {
    final data = json.decode(await response.transform(utf8.decoder).join());
    print(data);
  } else {
    print('Request failed with status code: ${response.statusCode}');
  }
}

发送POST请求（HttpClient）

import 'dart:convert';
import 'dart:io';

Future<void> createUser() async {
  final httpClient = HttpClient();
  final request = await httpClient.postUrl(Uri.parse('https://api.example.com/users'));
  request.headers.contentType = ContentType.json;
  request.add(json.encode({'name': 'John Doe', 'email': 'john@example.com'}));
  final response = await request.close();
  if (response.statusCode == HttpStatus.created) {
    final data = json.decode(await response.transform(utf8.decoder).join());
    print(data);
  } else {
    print('Request failed with status code: ${response.statusCode}');
  }
}

使用Dio进行网络请求

Dio是一个功能强大的HTTP客户端库，支持各种网络请求，并且具有丰富的配置选项。

基本配置

import 'package:dio/dio.dart';

void main() {
  final dio = Dio();
  dio.options.baseUrl = 'https://api.example.com';
  dio.options.connectTimeout = 5000; // 5秒超时
  dio.interceptors.add(
    InterceptorsWrapper(
      onRequest: (options, handler) {
        print('Requesting: ${options.method} ${options.path}');
        handler.next(options);
      },
      onResponse: (response, handler) {
        print('Response: ${response.statusCode}');
        handler.next(response);
      },
      onError: (error, handler) {
        print('Error: ${error.message}');
        handler.next(error);
      },
    ),
  );

  // 使用dio发送GET请求
  fetchUser().then((_) => print('User fetched successfully'));
}

Future<void> fetchUser() async {
  final response = await dio.get('/users');
  if (response.statusCode == 200) {
    print(response.data);
  } else {
    throw Exception('Failed to fetch user');
  }
}

文件上传

import 'dart:io';
import 'package:dio/dio.dart';

void main() {
  final dio = Dio();
  final file = File('/path/to/file');
  FormData formData = FormData.fromMap({
    'file': await MultipartFile.fromFile(file.path),
  });

  final response = await dio.post('https://api.example.com/upload', data: formData);
  if (response.statusCode == 201) {
    print(response.data);
  } else {
    throw Exception('Failed to upload file');
  }
}

错误处理

import 'package:dio/dio.dart';

Future<void> fetchUser() async {
  try {
    final response = await dio.get('/users');
    if (response.statusCode == 200) {
      print(response.data);
    } else {
      throw Exception('Request failed with status code: ${response.statusCode}');
    }
  } catch (error) {
    print('Error: ${error.toString()}');
  }
}

保存用户数据

Flutter中存储数据的方法

Flutter提供了多种存储数据的方式，包括SharedPreferences、SQLite数据库、Hive等。

SharedPreferences

SharedPreferences用于保存简单类型的键值对数据，如字符串、整数、布尔值等。

使用SharedPreferences进行数据持久化

首先，在pubspec.yaml文件中添加shared_preferences依赖：

dependencies:
  shared_preferences: ^2.0.6

读取数据

import 'package:shared_preferences/shared_preferences.dart';

Future<void> readData() async {
  final prefs = await SharedPreferences.getInstance();
  final name = prefs.getString('name');
  final age = prefs.getInt('age');
  print('Name: $name, Age: $age');
}

写入数据

import 'package:shared_preferences/shared_preferences.dart';

Future<void> writeData() async {
  final prefs = await SharedPreferences.getInstance();
  prefs.setString('name', 'John Doe');
  prefs.setInt('age', 30);
  print('Data saved successfully');
}

删除数据

import 'package:shared_preferences/shared_preferences.dart';

Future<void> deleteData() async {
  final prefs = await SharedPreferences.getInstance();
  prefs.remove('name');
  prefs.remove('age');
  print('Data deleted successfully');
}

实践示例：构建一个简单的用户设置页面

我们将构建一个简单的用户设置页面，可以保存和读取用户的姓名和年龄。

创建用户设置页面

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

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

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

class SettingsScreen extends StatefulWidget {
  @override
  _SettingsScreenState createState() => _SettingsScreenState();
}

class _SettingsScreenState extends State<SettingsScreen> {
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _ageController = TextEditingController();

  Future<void> _saveSettings() async {
    final prefs = await SharedPreferences.getInstance();
    prefs.setString('name', _nameController.text);
    prefs.setInt('age', int.parse(_ageController.text));
    print('Settings saved successfully');
  }

  Future<void> _loadSettings() async {
    final prefs = await SharedPreferences.getInstance();
    _nameController.text = prefs.getString('name') ?? '';
    _ageController.text = (prefs.getInt('age') ?? 0).toString();
    print('Settings loaded successfully');
  }

  @override
  void initState() {
    super.initState();
    _loadSettings();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _nameController,
              decoration: InputDecoration(
                labelText: 'Name',
              ),
            ),
            TextField(
              controller: _ageController,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                labelText: 'Age',
              ),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _saveSettings,
              child: Text('Save Settings'),
            ),
          ],
        ),
      ),
    );
  }
}

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

跃然一笑

手记
篇

粉丝

40

获赞与收藏

164

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30980 346

网络编程入门教程

20个小节 12758 240

Pandas 入门教程

25个小节 18643 345

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空