Flutter基础教程：从页面布局到网络通信完整指南

简介

Flutter 是一个由 Google 开发的开源 UI 工具包，旨在为多平台（如 Android、iOS、Web、桌面等）创建精美的原生应用。作为一名 Flutter 新手，你可能会觉得它的学习曲线有些陡峭，但通过本文的教学，你将能够掌握 Flutter 的基本开发技巧，包括页面布局、组件使用、网络请求、状态管理、路由跳转等。让我们一步步来了解这些基础知识。

1. Flutter 项目结构

在 Flutter 中，所有的应用逻辑通常位于 lib/ 目录下，其中 main.dart 是应用的入口文件。你可以通过该文件定义应用的主题、路由、首页等。一个典型的 Flutter 项目结构如下：

bash
lib/
  main.dart        # 应用入口文件
  pages/           # 页面文件夹
  widgets/         # 自定义组件文件夹
  models/          # 数据模型文件夹
  services/        # 后端接口、WebSocket 服务等文件夹

2. 页面布局

在 Flutter 中，页面的布局通过 Widget 实现。Flutter 提供了多种常用的布局组件，最常用的包括 Column、Row、Stack、Container 和 Scaffold。

示例：基础页面布局

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter 页面布局示例"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("欢迎使用 Flutter!"),
          ElevatedButton(
            onPressed: () {},
            child: Text("点击按钮"),
          ),
        ],
      ),
    );
  }
}

关键组件：

Scaffold：一个提供常见布局结构的容器，通常用于应用的基础布局。
Column：用于垂直排列子组件。
Row：用于水平排列子组件。
Container：用于包裹其他组件，可以设置大小、颜色、边距等。

3. 基本组件使用

常用组件：

Text：用于显示文本。
ElevatedButton：常用的按钮组件。
Icon：用于显示图标。
Image：用于显示图片。
TextField：用于文本输入。

示例：使用 `TextField` 和按钮

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

class LoginPage extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("登录页面"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(labelText: "请输入用户名"),
            ),
            ElevatedButton(
              onPressed: () {
                print("用户名: ${_controller.text}");
              },
              child: Text("登录"),
            ),
          ],
        ),
      ),
    );
  }
}

4. HTTP 接口调用

Flutter 提供了 http 包来处理网络请求。你可以使用 http.get()、http.post() 等方法进行接口调用。

示例：使用 HTTP 请求获取数据

首先，在 pubspec.yaml 中添加 http 依赖：

yaml
dependencies:
  http: ^0.13.3

然后，在代码中进行 HTTP 请求：

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

Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

  if (response.statusCode == 200) {
    // 解析 JSON 数据
    List data = jsonDecode(response.body);
    print(data);
  } else {
    throw Exception('Failed to load data');
  }
}

5. 登录状态存储

Flutter 提供了 shared_preferences 包来存储简单的键值对数据，如登录状态。

示例：存储登录信息

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

yaml
dependencies:
  shared_preferences: ^2.0.15

然后，使用它存储和获取登录信息：

java
import 'package:shared_preferences/shared_preferences.dart';

Future<void> saveLoginStatus(bool isLoggedIn) async {
  final prefs = await SharedPreferences.getInstance();
  prefs.setBool('is_logged_in', isLoggedIn);
}

Future<bool> getLoginStatus() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getBool('is_logged_in') ?? false;
}

6. WebSocket 通信

WebSocket 是一种持久连接，适用于实时数据传输。你可以使用 web_socket_channel 包来实现 WebSocket 通信。

示例：使用 WebSocket 连接

首先，在 pubspec.yaml 中添加 web_socket_channel 依赖：

yaml
dependencies:
  web_socket_channel: ^2.1.0

然后，使用 WebSocket 进行连接：

java
import 'package:web_socket_channel/web_socket_channel.dart';

class WebSocketExample extends StatelessWidget {
  final WebSocketChannel channel = WebSocketChannel.connect(
    Uri.parse('ws://echo.websocket.org'),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("WebSocket 示例")),
      body: Column(
        children: <Widget>[
          StreamBuilder(
            stream: channel.stream,
            builder: (context, snapshot) {
              return Text(snapshot.hasData ? snapshot.data.toString() : '');
            },
          ),
          TextField(
            onSubmitted: (message) {
              channel.sink.add(message); // 发送消息
            },
          ),
        ],
      ),
    );
  }
}

7. 页面路由跳转

Flutter 提供了 Navigator 来进行页面跳转。你可以使用 Navigator.push 或 Navigator.pushNamed 来跳转到新的页面。

示例：使用命名路由跳转页面

在 MaterialApp 中设置路由：

java
MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/login': (context) => LoginPage(),
  },
)

然后，使用 Navigator.pushNamed 跳转页面：

java
Navigator.pushNamed(context, '/login');

8. 本地应用唤起

在 Flutter 中，你可以使用 url_launcher 包来打开外部链接或本地应用。

示例：打开外部浏览器或应用

首先，在 pubspec.yaml 中添加 url_launcher 依赖：

yaml
dependencies:
  url_launcher: ^6.0.3

然后，使用 launch 打开应用或 URL：

java
import 'package:url_launcher/url_launcher.dart';

Future<void> _launchURL() async {
  const url = 'https://flutter.dev';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw '无法打开链接 $url';
  }
}

总结

通过这篇文章，你已经学习了 Flutter 的一些基础知识：

页面布局：使用 Column、Row、Scaffold 等组件来构建页面。
基本组件：了解了 Text、Button、TextField 等常用组件。
HTTP 请求：使用 http 包进行网络请求。
登录状态存储：使用 shared_preferences 存储本地数据。
WebSocket 通信：实现实时数据传输。
页面路由跳转：使用 Navigator 进行页面跳转。
本地应用唤起：使用 url_launcher 打开 URL 或外部应用。

希望这篇文章对你入门 Flutter 开发有所帮助！通过实践这些基础知识，你将能够创建功能丰富的 Flutter 应用。

目录

简介