首页手记 Flutter基础学习：新手入门指南

Flutter基础学习：新手入门指南

标签：

移动开发

概述

本文详细介绍了Flutter基础学习，包括环境搭建、开发环境配置和创建第一个Flutter项目等内容。文章还涵盖了Flutter的基本组件、状态管理、导航与路由、数据存储与网络请求以及布局与样式等核心概念。通过本文，读者可以全面了解并掌握Flutter的基础知识。

引入与环境搭建

Flutter是什么

Flutter 是由 Google 开发的开源 UI 工具包，用于构建跨平台的应用程序。它允许开发者使用一套代码库来为多个平台（如 iOS 和 Android）构建高质量的原生用户界面。Flutter 使用 Dart 语言编写，能够实现快速开发、高性能和美观的用户界面。

安装Flutter SDK

安装 Flutter SDK 需要以下几个步骤：

安装 Dart SDK：Flutter 依赖于 Dart SDK，所以首先需要安装 Dart SDK。你可以从 Dart 的官方网站下载 Dart SDK。
```
# other steps are omitted for brevity
```
安装 Flutter SDK：从 Flutter 官方网站下载最新版本的 Flutter SDK，解压后将 Flutter 的 bin 目录添加到系统的 PATH 环境变量中。
配置环境变量：确保 Flutter 的 bin 目录已添加到 PATH 中。可以通过命令行验证是否安装成功。
```
flutter doctor
```

该命令会检查工具链并列出可能需要安装或配置的依赖项。根据提示安装必要的依赖。

设置开发环境

安装 Flutter SDK 后，你需要配置开发环境以确保能够使用 Flutter 进行开发。这里以 Windows 为例说明配置步骤：

安装 Android Studio：Flutter 项目依赖于 Android Studio，你需要下载并安装 Android Studio。
```
# other steps are omitted for brevity
```
安装 Android SDK：在 Android Studio 中安装必要的 Android SDK 组件，包括命令行工具、Android SDK 平台工具、Android SDK 命令行工具。
安装 iOS 模拟器：如果你希望在 iOS 设备或模拟器上测试 Flutter 应用，还需要安装 Xcode 以及相关的开发工具。
```
# other steps are omitted for brevity
```

创建第一个Flutter项目

创建 Flutter 项目的步骤如下：

启动命令行工具：打开命令行工具（如 Windows 的 CMD 或 Mac/Linux 的 Terminal）。
```
# other steps are omitted for brevity
```
运行 Flutter 命令行工具：使用 flutter create 命令创建一个新的 Flutter 项目。
```
flutter create my_first_flutter_app
```
打开项目：使用命令行工具进入项目目录，打开项目文件。
```
cd my_first_flutter_app
```
运行项目：使用 Flutter 提供的命令运行项目，这将会在你的开发环境中自动运行应用。
```
flutter run
```

小结

Flutter 是一个强大的跨平台开发框架。
安装 Flutter SDK 需要下载并配置 Dart SDK 和 Flutter SDK。
配置开发环境包括安装 Android Studio 和 Xcode，以及必要的 SDK 组件。
创建并运行第一个 Flutter 项目需使用 Flutter 命令行工具。

Flutter基本组件

常用的Widget介绍

在 Flutter 中，所有可视的用户界面元素都是由 Widget 组成的。Widget 是 Flutter 中的基本构成单元，用于描述 UI 的一部分。每个 Widget 都可以有自己的属性和子 Widget。以下是一些常用的 Widget：

Text：显示文本。
Image：显示图像。
Container：一个通用的布局组件，可以包含其他 Widget。
Column：垂直排列子 Widget。
Row：水平排列子 Widget。
Button：提供各种类型的按钮。

以下是一个简单的 Flutter 应用程序，展示了这些 Widget 的使用：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Widgets"),
        ),
        body: Column(
          children: [
            Text("Hello, Flutter!"),
            Image.network("https://example.com/image.jpg"),
            Container(
              child: Text("Container Text"),
              color: Colors.blue,
            ),
            Row(
              children: [
                Text("Row 1"),
                Text("Row 2"),
              ],
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text("Button"),
            ),
          ],
        ),
      ),
    );
  }
}

创建布局

Flutter 的布局系统需要理解两个重要的概念：Row 和 Column。这两个 Widget 分别用于水平和垂直方向排列子 Widget。以下是一个简单的布局示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Layout"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Top Text"),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text("Left Text"),
                Text("Right Text"),
              ],
            ),
            Text("Bottom Text"),
          ],
        ),
      ),
    );
  }
}

使用Text、Image、Button等基本组件

在 Flutter 中，Text、Image 和 Button 等基本组件是构建应用界面的基础。以下是一个使用这些组件的简单示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Basic Components"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Hello, Flutter!",
              style: TextStyle(fontSize: 24, color: Colors.red),
            ),
            Image.network("https://example.com/image.jpg"),
            ElevatedButton(
              onPressed: () {
                print("Button clicked");
              },
              child: Text("Click Me"),
            ),
          ],
        ),
      ),
    );
  }
}

状态管理

理解状态管理的重要性

在 Flutter 中，状态管理是应用开发的一个重要方面，它决定了应用如何响应用户交互并更新其显示内容。一个应用的状态由一些可以变化的变量组成，比如是否显示一个菜单或用户的数据。管理好这些状态可以确保应用的逻辑性和响应性。

实现简单的状态管理

在 Flutter 中，最简单的状态管理方法是直接在 State 类中管理状态。以下是一个简单的示例，展示了如何使用状态变量和 setState 方法来更新 UI：

import 'package:flutter/material.dart';

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

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

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("State Management"),
      ),
      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,
            ),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

使用Provider管理状态

Provider 是一个用于状态管理的库，可以简化状态管理的复杂度。以下是一个使用 Provider 管理状态的示例：

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

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Provider State Management"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Consumer<Counter>(
              builder: (context, counter, child) {
                return Text(
                  '${counter.count}',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
            ElevatedButton(
              onPressed: () {
                Provider.of<Counter>(context, listen: false).increment();
              },
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

class Counter with ChangeNotifier {
  int count = 0;

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

导航与路由

添加页面导航

Flutter 提供了强大的导航功能，允许用户在应用的不同页面之间导航。以下是一个简单的示例，展示了如何使用 Flutter 的导航功能：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation',
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("First Page"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          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"),
        ),
      ),
    );
  }
}

创建和配置路由

在 Flutter 中，路由是页面之间的连接，可以使用 PageRouteBuilder 创建自定义路由。以下是一个自定义路由的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Route Example',
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
      },
      onGenerateRoute: (settings) {
        if (settings.name == '/third') {
          return MaterialPageRoute(
            builder: (context) => ThirdPage(),
          );
        }
        return null;
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("First Page"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          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"),
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Third Page"),
      ),
      body: Center(
        child: Text("This is the third page."),
      ),
    );
  }
}

使用Navigator进行页面跳转

Navigator 是 Flutter 提供的一个管理路由的类，它可以用来控制页面的打开和关闭。以下是一个使用 Navigator 进行页面跳转的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigator Example',
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("First 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"),
        ),
      ),
    );
  }
}

数据存储与网络请求

本地数据存储：SharedPreferences

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: 'SharedPreferences Example',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String savedData;

  Future<void> _saveData(String data) async {
    final prefs = await SharedPreferences.getInstance();
    prefs.setString('savedData', data);
  }

  Future<void> _loadData() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      savedData = prefs.getString('savedData');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SharedPreferences Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              savedData ?? 'No Data',
              style: TextStyle(fontSize: 20),
            ),
            ElevatedButton(
              onPressed: () {
                _saveData('Hello, SharedPreferences!');
                _loadData();
              },
              child: Text('Save and Load Data'),
            ),
          ],
        ),
      ),
    );
  }
}

网络请求：使用http库

网络请求是 Flutter 应用中常见的操作之一。使用 http 库可以方便地发起 HTTP 请求，获取服务器端的数据。以下是一个使用 http 库发起 GET 请求的示例：

安装 http 库：

flutter pub add 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: 'HTTP Request Example',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String responseText = '';

  Future<void> _fetchData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/todos/1'));
    if (response.statusCode == 200) {
      setState(() {
        responseText = json.decode(response.body)['title'];
      });
    } else {
      setState(() {
        responseText = 'Request failed with status: ${response.statusCode}.';
      });
    }
  }

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

解析JSON数据

在 Flutter 中，解析 JSON 数据可以使用 dart:convert 库中的 json.decode 方法。以下是一个解析 JSON 数据的示例：

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

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

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String responseText = '';

  Future<void> _fetchAndParseData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/todos/1'));
    if (response.statusCode == 200) {
      Map<String, dynamic> jsonMap = json.decode(response.body);
      setState(() {
        responseText = jsonMap['title'];
      });
    } else {
      setState(() {
        responseText = 'Request failed with status: ${response.statusCode}.';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("JSON Parsing Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              responseText,
              style: TextStyle(fontSize: 20),
            ),
            ElevatedButton(
              onPressed: _fetchAndParseData,
              child: Text('Fetch and Parse Data'),
            ),
          ],
        ),
      ),
    );
  }
}

布局与样式

Flex布局与Grid布局

Flex 布局和 Grid 布局是 Flutter 中两种常用的布局方式。以下是一个使用 Flex 和 Grid 的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flex and Grid Layout Example',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flex and Grid Layout"),
      ),
      body: Column(
        children: [
          // Flex布局
          Flexible(
            flex: 1,
            child: Container(
              color: Colors.red,
              child: Center(child: Text("Flex Layout")),
            ),
          ),
          Flexible(
            flex: 2,
            child: Container(
              color: Colors.blue,
              child: Center(child: Text("Flex Layout")),
            ),
          ),
          // Grid布局
          Expanded(
            child: GridView.count(
              crossAxisCount: 3,
              children: [
                Container(
                  color: Colors.red,
                  child: Center(child: Text("Grid 1")),
                ),
                Container(
                  color: Colors.blue,
                  child: Center(child: Text("Grid 2")),
                ),
                Container(
                  color: Colors.green,
                  child: Center(child: Text("Grid 3")),
                ),
                Container(
                  color: Colors.orange,
                  child: Center(child: Text("Grid 4")),
                ),
                Container(
                  color: Colors.purple,
                  child: Center(child: Text("Grid 5")),
                ),
                Container(
                  color: Colors.yellow,
                  child: Center(child: Text("Grid 6")),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

定义样式与主题

在 Flutter 中，你可以通过定义主题和样式来控制组件的外观。以下是一个定义主题和样式的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Theme and Style Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ThemeExample(),
    );
  }
}

class ThemeExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Theme and Style Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Default Text',
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              'Custom Text',
              style: TextStyle(
                fontSize: 24,
                color: Colors.red,
                fontWeight: FontWeight.bold,
              ),
            ),
            ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.orange),
                foregroundColor: MaterialStateProperty.all(Colors.white),
              ),
              onPressed: () {},
              child: Text('Custom Button'),
            ),
          ],
        ),
      ),
    );
  }
}

使用自定义组件

自定义组件是 Flutter 中非常强大的功能，可以让你创建可重用的 UI 片段。以下是一个创建和使用自定义组件的示例：

import 'package:flutter/material.dart';

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

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

class CustomComponent extends StatelessWidget {
  final String text;

  CustomComponent({required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text(text),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Custom Component Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CustomComponent(text: "Custom Component 1"),
            CustomComponent(text: "Custom Component 2"),
          ],
        ),
      ),
    );
  }
}

总结

通过本文的学习，你应该能够掌握如何使用 Flutter 创建简单的应用，并了解一些基本的概念和组件。在进一步的学习中，你可以深入学习 Flutter 的更多高级特性，如动画、手势识别等。如果你希望继续深入学习，可以参考慕课网提供的课程和教程。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

芜湖不芜

手记
篇

粉丝

77

获赞与收藏

340

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 31416 348

网络编程入门教程

20个小节 12873 242

Pandas 入门教程

25个小节 18758 351

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空