亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

Flutter常用功能資料入門教程

標簽：
移動開發
概述

本文详细介绍了Flutter常用功能资料，涵盖了环境搭建、小部件使用、状态管理、导航与路由及数据持久化等内容，帮助开发者快速上手Flutter开发。文章还介绍了布局管理、网络请求和资源管理等重要知识点，提供了丰富的示例代码。对于进一步学习Flutter的开发者，推荐访问相关课程资源。

Flutter简介与环境搭建
什么是Flutter

Flutter是由Google开发的开源框架，用于创建跨平台的移动应用。它允许开发者使用一个代码库同时为iOS和Android开发高质量的原生应用。Flutter使用Dart语言编写，提供了丰富的UI组件和强大的动画支持。Flutter还具有热重载功能，允许开发者在开发过程中快速看到修改的效果，提高了开发效率。

开发环境搭建

安装Flutter SDK

  1. 下载Flutter SDK：
    • 访问Flutter官方网站，下载对应操作系统的Flutter SDK。
  2. 解压下载的文件到指定目录。
  3. 配置环境变量：
    • 将Flutter SDK的bin目录添加到系统的PATH环境变量中。

安装Dart SDK

  1. 下载Dart SDK：
    • 访问Dart官方网站，下载对应操作系统的Dart SDK。
  2. 解压下载的文件到指定目录。
  3. 配置环境变量：
    • 将Dart SDK的bin目录添加到系统的PATH环境变量中。

安装IDE

推荐使用Visual Studio Code作为开发工具，因为它提供了Flutter插件支持。

  1. 下载并安装Visual Studio Code。
  2. 安装Flutter插件：
    • 打开Visual Studio Code。
    • 点击左侧活动栏中的扩展图标（四个方块组成的图标）。
    • 在搜索框中输入flutter，选择Flutter插件并安装。
    • 安装完成后，重启Visual Studio Code。

创建Flutter项目

  1. 打开终端或命令行工具。
  2. 运行以下命令创建Flutter项目：
flutter create my_project
  1. 进入项目目录：
cd my_project
  1. 运行应用：
flutter run
第一个Flutter应用

创建一个简单的Flutter应用

创建一个简单的Flutter应用，显示一个文本“Hello, Flutter”。

  1. 打开lib/main.dart文件，编辑代码如下：
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello, Flutter'),
      ),
      body: Center(
        child: Text(
          'Hello, Flutter',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}
  1. 运行应用：
flutter run
布局管理
常用布局组件介绍

Flutter提供了多种布局组件，常见的布局组件包括：

  • Row：水平排列子组件。
  • Column：垂直排列子组件。
  • Stack：允许子组件堆叠在一起。
  • Align：对齐子组件。
  • Center：将子组件居中。
  • Container：容器，提供了丰富的布局和样式功能。
  • Expanded：使子组件填充其父组件的剩余空间。
  • Flexible：允许子组件在父组件中伸缩。

Row与Column组件

  • Row：水平布局组件，将子组件沿水平方向排列。
  • Column：垂直布局组件，将子组件沿垂直方向排列。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Layout',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Layout Demo'),
      ),
      body: Column(
        children: [
          Row(
            children: [
              Expanded(
                child: Container(
                  color: Colors.red,
                  height: 100,
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.green,
                  height: 100,
                ),
              ),
            ],
          ),
          Row(
            children: [
              Expanded(
                child: Container(
                  color: Colors.blue,
                  height: 100,
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.yellow,
                  height: 100,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Stack组件

  • Stack：允许子组件堆叠在一起，可以设置堆叠顺序。
  • Positioned：用于指定Stack中子组件的位置。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Layout',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Layout Demo'),
      ),
      body: Stack(
        children: [
          Container(
            color: Colors.red,
            height: 200,
            width: 200,
          ),
          Positioned(
            top: 50,
            left: 50,
            child: Container(
              color: Colors.green,
              height: 100,
              width: 100,
            ),
          ),
          Positioned(
            top: 150,
            left: 150,
            child: Container(
              color: Colors.blue,
              height: 50,
              width: 50,
            ),
          ),
        ],
      ),
    );
  }
}
布局案例解析

实现一个简单的网格布局

使用Column和Row组件实现一个网格布局，每个网格包含一个文本。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Layout',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grid Layout Demo'),
      ),
      body: Column(
        children: [
          Row(
            children: [
              Expanded(
                child: Container(
                  color: Colors.red,
                  child: Center(
                    child: Text('A'),
                  ),
                  height: 100,
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.green,
                  child: Center(
                    child: Text('B'),
                  ),
                  height: 100,
                ),
              ),
            ],
          ),
          Row(
            children: [
              Expanded(
                child: Container(
                  color: Colors.blue,
                  child: Center(
                    child: Text('C'),
                  ),
                  height: 100,
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.yellow,
                  child: Center(
                    child: Text('D'),
                  ),
                  height: 100,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
小部件（Widget）使用
常用Widget详解

Flutter提供了丰富的UI组件，常用的Widget包括：

  • Text：显示文本。
  • Image：显示图片。
  • Button：按钮组件。
  • TextField：文本输入框。
  • Container：提供布局和样式。
  • ListView：列表视图。

Text组件

  • Text：显示文本，支持多种文本样式。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Demo'),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(
            fontSize: 20,
            color: Colors.blue,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

Image组件

  • Image：显示图片，支持网络图片和本地图片。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Demo'),
      ),
      body: Center(
        child: Image.network(
          'https://flutter.dev/docs/assets/images/flutter-logo.png',
          width: 200,
          height: 200,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

Button组件

Flutter提供了多种Button组件：

  • RaisedButton：带有阴影的按钮。
  • FlatButton：扁平按钮。
  • IconButton：图标按钮。
  • ElevatedButton：带有阴影的按钮（推荐使用）。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Button Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                print('Pressed ElevatedButton');
              },
              child: Text('Elevated Button'),
            ),
            SizedBox(height: 20),
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () {
                print('Pressed IconButton');
              },
            ),
          ],
        ),
      ),
    );
  }
}

TextField组件

  • TextField：文本输入框，支持输入文本。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _text = '';

  void _onTextChange(String value) {
    setState(() {
      _text = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TextField Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              onChanged: _onTextChange,
              decoration: InputDecoration(
                labelText: 'Enter text',
              ),
            ),
            SizedBox(height: 20),
            Text(
              'You entered: $_text',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

Container组件

  • Container：提供布局和样式功能，可以设置颜色、边框、圆角等。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Container Demo'),
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(10),
            border: Border.all(
              color: Colors.black,
              width: 2,
            ),
          ),
          child: Center(
            child: Text(
              'Container',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

ListView组件

  • ListView：列表视图，可以显示多个列表项。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView Demo'),
      ),
      body: ListView(
        children: [
          ListTile(
            leading: Icon(Icons.favorite),
            title: Text('Item 1'),
          ),
          ListTile(
            leading: Icon(Icons.star),
            title: Text('Item 2'),
          ),
          ListTile(
            leading: Icon(Icons.add),
            title: Text('Item 3'),
          ),
          ListTile(
            leading: Icon(Icons.remove),
            title: Text('Item 4'),
          ),
        ],
      ),
    );
  }
}
Widget组合与复用技巧

组件复用

  • StatelessWidget：无状态组件，适用于不需要维护任何状态的组件。
  • StatefulWidget：有状态组件，适用于需要维护状态的组件。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: MyButton(),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        print('Button Pressed');
      },
      child: Text('Click Me'),
    );
  }
}

组件组合

  • Column、Row、Stack等组件可以组合多个子组件，实现复杂的布局。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.red,
                ),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.green,
                ),
              ],
            ),
            SizedBox(height: 20),
            Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Hello, Flutter!',
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
状态管理
状态管理的基本概念

状态管理是指管理应用中的状态变化。状态可以是UI状态（如按钮是否被点击）、应用状态（如用户登录状态）等。Flutter提供了多种状态管理方案，常用的有：

  • StatefulWidget：通过State类管理状态。
  • Provider：由Google维护的状态管理库，提供了便捷的状态管理方式。
  • BLoC（Business Logic Component）：一种架构模式，通过事件和状态管理应用状态。

StatefulWidget

  • StatefulWidget：通过State类管理状态。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Provider

  • Provider：由Google维护的状态管理库，提供了便捷的状态管理方式。

示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counter.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
简易状态管理方案

使用InheritedWidget管理状态

  • InheritedWidget：一种特殊的小部件，可以将数据传递给子小部件。

示例代码：

import 'package:flutter/material.dart';

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

class Counter extends InheritedWidget {
  final int count;

  Counter({Key? key, required Widget child, this.count = 0})
      : super(key: key, child: child);

  @override
  bool updateShouldNotify(Counter oldWidget) {
    return oldWidget.count != count;
  }

  static Counter of(BuildContext context) {
    final Counter? result =
        context.dependOnInheritedWidgetOfExactType<Counter>();
    assert(result != null, 'No Counter widget found in context');
    return result!;
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Counter(
      count: 0,
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Counter.of(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counter.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          final count = Counter.of(context);
          count.count++;
          // Notify the widget tree that the data has changed.
          setState(() {});
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

使用Stream管理状态变化

  • Stream：一种异步通信机制，用于处理流数据。

示例代码：

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

class Counter with StreamController<int> {
  Counter()
      : super(sink: StreamController<int>.broadcast().sink,
            stream: StreamController<int>.broadcast().stream) {
    StreamController<int>.broadcast().stream.listen((event) {
      super.sink.add(event + 1);
    });
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamProvider<int>.value(
      value: Counter(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = StreamProvider<int>.value(
      value: Counter(),
      initialData: 0,
    ).value;

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            StreamBuilder<int>(
              stream: counter,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(
                    '${snapshot.data}',
                    style: Theme.of(context).textTheme.headline4,
                  );
                }
                return Text('Loading...');
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Counter().sink.add(1);
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
导航与路由
导航机制介绍

Flutter中的导航可以通过以下几种方式实现：

  • Navigator：Flutter内置的导航管理器，可以通过Navigator.push()和Navigator.pop()方法进行页面跳转和返回。
  • PageRouteBuilder：用于自定义路由的切换效果。
  • MaterialPageRoute：提供Material Design风格的路由切换效果。

Navigator的基本使用

  • Navigator.push()：导航到新页面。
  • Navigator.pop()：从堆栈弹出页面返回到上一页。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

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

PageRouteBuilder自定义路由切换效果

  • PageRouteBuilder：用于自定义路由的切换效果。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              PageRouteBuilder(
                pageBuilder: (context, animation, secondaryAnimation) {
                  return FadeTransition(
                    opacity: animation,
                    child: SecondPage(),
                  );
                },
              ),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}
路由实现案例

实现一个简单的导航效果

使用Navigator实现一个简单的导航效果，从主页导航到详情页。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => MyHomePage(),
        '/details': (context) => DetailsPage(),
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/details');
          },
          child: Text('Go to Details Page'),
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}
其他常用功能
数据持久化

Flutter提供了多种数据持久化方式，常用的包括：

  • SharedPreferences：用于存储简单的键值对数据。
  • SQLite：提供完整的数据库支持。
  • Hive：轻量级的键值对存储和对象存储。

SharedPreferences

  • SharedPreferences：用于存储简单的键值对数据。

示例代码：

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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _name = '';

  void _loadName() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      _name = prefs.getString('name') ?? '';
    });
  }

  void _saveName() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setString('name', _name);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SharedPreferences Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              onChanged: (value) {
                setState(() {
                  _name = value;
                });
              },
              decoration: InputDecoration(
                labelText: 'Enter your name',
              ),
            ),
            ElevatedButton(
              onPressed: _saveName,
              child: Text('Save'),
            ),
            ElevatedButton(
              onPressed: _loadName,
              child: Text('Load'),
            ),
            Text(
              'Your name is: $_name',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

SQLite

  • SQLite：提供完整的数据库支持。
  • Flutter中使用SQLite需要导入sqflite插件。

示例代码：

import 'package:flutter/material.dart';
import 'package:sqflite/sqflite.dart' as sqflite;
import 'dart:async';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _nameController = TextEditingController();
  final _ageController = TextEditingController();
  final _dbHelper = DatabaseHelper.instance;

  Future<void> _loadData() async {
    final data = await _dbHelper.queryAllRows();
    setState(() {
      print(data);
    });
  }

  Future<void> _insertData() async {
    await _dbHelper.insert(
      {'name': _nameController.text, 'age': int.parse(_ageController.text)},
    );
    _nameController.clear();
    _ageController.clear();
    _loadData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SQLite Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _nameController,
              decoration: InputDecoration(
                labelText: 'Name',
              ),
            ),
            TextField(
              controller: _ageController,
              decoration: InputDecoration(
                labelText: 'Age',
              ),
            ),
            ElevatedButton(
              onPressed: _insertData,
              child: Text('Save'),
            ),
            ElevatedButton(
              onPressed: _loadData,
              child: Text('Load'),
            ),
          ],
        ),
      ),
    );
  }
}

class DatabaseHelper {
  static final DatabaseHelper _instance = DatabaseHelper._internal();

  DatabaseHelper._internal();

  factory DatabaseHelper() => _instance;

  sqflite.Database? _db;

  Future<sqflite.Database> get db async {
    if (_db != null) return _db!;
    _db = await initDb();
    return _db!;
  }

  Future<sqflite.Database> initDb() async {
    sqflite.Database db = await sqflite.openDatabase('my_database.db', version: 1,
        onCreate: (db, version) {
      return db.execute(
          "CREATE TABLE user (id INTEGER PRIMARY KEY, name TEXT, age INTEGER)");
    });
    return db;
  }

  Future<void> insert(Map<String, dynamic> row) async {
    await db.then((db) {
      return db.insert('user', row);
    });
  }

  Future<List<Map<String, dynamic>>> queryAllRows() async {
    return db.then((db) {
      return db.query('user');
    });
  }
}

Hive

  • Hive：轻量级的键值对存储和对象存储。

示例代码：

import 'package:flutter/material.dart';
import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';

void main() async {
  await Hive.initFlutter();
  await Hive.openBox('my_box');
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _nameController = TextEditingController();
  final _box = Hive.box('my_box');

  void _saveData() {
    _box.put('name', _nameController.text);
  }

  void _loadData() {
    setState(() {
      _nameController.text = _box.get('name', defaultValue: '');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hive Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _nameController,
              decoration: InputDecoration(
                labelText: 'Name',
              ),
            ),
            ElevatedButton(
              onPressed: _saveData,
              child: Text('Save'),
            ),
            ElevatedButton(
              onPressed: _loadData,
              child: Text('Load'),
            ),
          ],
        ),
      ),
    );
  }
}
网络请求

Flutter提供了多种网络请求库，常用的包括：

  • dio：高效的HTTP请求库。
  • http：官方提供的HTTP请求库。
  • flutter_http：简单易用的HTTP请求库。

dio

  • dio：高效的HTTP请求库。

示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _response = '';

  Future<void> _fetchData() async {
    try {
      final response = await Dio().get('https://jsonplaceholder.typicode.com/posts/1');
      setState(() {
        _response = response.data.toString();
      });
    } catch (e) {
      setState(() {
        _response = e.toString();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dio Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _fetchData,
              child: Text('Fetch Data'),
            ),
            SizedBox(height: 20),
            Text(
              _response,
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

http

  • http：官方提供的HTTP请求库。

示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _response = '';

  Future<void> _fetchData() async {
    try {
      final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
      setState(() {
        _response = response.body;
      });
    } catch (e) {
      setState(() {
        _response = e.toString();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTTP Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _fetchData,
              child: Text('Fetch Data'),
            ),
            SizedBox(height: 20),
            Text(
              _response,
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

flutter_http

  • flutter_http：简单易用的HTTP请求库。

示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _response = '';

  Future<void> _fetchData() async {
    try {
      final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
      setState(() {
        _response = response.body;
      });
    } catch (e) {
      setState(() {
        _response = e.toString();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTTP Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _fetchData,
              child: Text('Fetch Data'),
            ),
            SizedBox(height: 20),
            Text(
              _response,
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}
资源管理

Flutter提供了多种资源管理方式，常见的包括：

  • 图片资源：通过Image组件加载本地或网络图片。
  • 字体资源：通过Text组件设置自定义字体。
  • 本地化资源：通过Localizations管理应用的多语言支持。

图片资源

  • Image：通过Image组件加载本地或网络图片。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Demo'),
      ),
      body: Center(
        child: Image.network(
          'https://flutter.dev/assets/images/flutter-logo.png',
          width: 200,
          height: 200,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

字体资源

  • Text：通过Text组件设置自定义字体。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Font Demo'),
      ),
      body: Center(
        child: Text(
          'Hello, Flutter!',
          style: TextStyle(
            fontFamily: 'Roboto',
            fontSize: 24,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

本地化资源

  • Localizations：通过Localizations管理应用的多语言支持。
  • 需要定义不同的语言文件并加载对应的语言资源。

示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:intl/intl.dart' as intl;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      locale: Locale('zh', 'CN'),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Localization Demo'),
      ),
      body: Center(
        child: Text(
          intl.Intl.message('Hello, Flutter!'),
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

资源文件管理

  • AssetBundle：通过AssetBundle管理应用内的资源文件。

示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _text = '';

  Future<void> _loadText() async {
    final assetBundle = DefaultAssetBundle.of(context);
    final text = await assetBundle.loadString('assets/text.txt');
    setState(() {
      _text = text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Asset Bundle Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _loadText,
              child: Text('Load Text'),
            ),
            SizedBox(height: 20),
            Text(
              _text,
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}
总结

本文详细介绍了Flutter开发的基础知识，从环境搭建到常用功能的实现，希望能够帮助初学者快速上手Flutter开发。更多深入的Flutter开发技巧，可以参考官方文档或参与社区讨论。对于想要进一步学习Flutter的开发者，推荐访问慕课网，那里提供了丰富的Flutter课程资源。

點擊查看更多內容
為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

作者其他優質文章

正在加載中
PHP開發工程師
手記
篇
粉絲
10
獲贊與收藏
56

關注作者，訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習，寫下你的評論
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消