慕课甄选-2024年Flutter零基础极速入门到进阶实战（完结）

用户615772231586
268 阅读2分钟

慕课甄选-2024年Flutter零基础极速入门到进阶实战（完结）

慕课甄选-2024年Flutter零基础极速入门到进阶实战（完结）

Flutter 零基础入门

一、Flutter 简介

Flutter 是谷歌开发的一款开源的跨平台移动应用开发框架。它允许开发者使用单一的代码库构建高性能、高保真的 iOS 和 Android 应用程序，并且还可以将应用编译成 Web 应用、桌面应用（Windows、Mac、Linux），大大提高了开发效率，降低了开发成本。

二、环境搭建

（一）安装 Flutter SDK

  1. 首先，从 Flutter 官方网站（flutter.dev/）下载适合你操作系统的 Flutter SDK。
  2. 将下载的文件解压到你希望安装的目录，例如在 Windows 下可以是C:\flutter，在 Linux 或 macOS 下可以是~/flutter。

（二）配置环境变量

  1. Windows：在系统属性中，找到 “高级系统设置”，点击 “环境变量”。在 “用户变量” 或 “系统变量”（建议系统变量，如果希望所有用户都能使用）中找到 “Path” 变量，点击 “编辑”。添加 Flutter 的bin目录路径，例如C:\flutter\bin。新建一个名为FLUTTER_ROOT的变量，值为 Flutter 的安装目录，如C:\flutter。

  2. Linux 和 macOS：编辑~/.bashrc或~/.zshrc文件（取决于你使用的 Shell）。添加以下内容：

收起

bash

复制

export PATH="$PATH:/path/to/flutter/bin"
export FLUTTER_ROOT=/path/to/flutter

其中/path/to/flutter是你实际的 Flutter 安装路径。
3. 验证安装：在命令行中输入flutter doctor，它会检查你的 Flutter 开发环境，并列出需要解决的问题。根据提示安装和配置缺少的依赖项，直到没有任何问题。

三、创建第一个 Flutter 项目

（一）使用命令行创建项目

在命令行中，使用flutter create my_first_flutter_app（my_first_flutter_app是项目名称，你可以根据自己的喜好更改）命令创建一个新的 Flutter 项目。

（二）项目结构介绍

创建好的项目有以下主要目录和文件：

  • lib：这是存放 Flutter 应用代码的目录，主要使用 Dart 语言编写。里面的main.dart是应用的入口文件。
  • android：包含了与 Android 平台相关的配置和代码。
  • ios：包含了与 iOS 平台相关的配置和代码。
  • pubspec.yaml：这是 Flutter 项目的配置文件，用于管理项目的依赖项（类似其他语言中的package.json等文件）。

四、Flutter 基础概念与编程

（一）Widget（小部件）

  1. Widget 是 Flutter 应用的基本构建块，它们用于构建用户界面。可以将 Widget 看作是一个可视化的组件，如按钮、文本框、图像等。

  2. Widget 分为两类：StatelessWidget：无状态小部件，这种小部件一旦创建，其属性就不能改变。例如，一个简单的文本显示小部件，它的文本内容在运行时不会改变。StatefulWidget：有状态小部件，这种小部件的状态可以在其生命周期内发生变化。例如，一个计数器按钮，每次点击计数器的值会改变，这就需要使用有状态小部件来实现。

  3. 以下是一个简单的StatelessWidget示例：

收起

dart

复制

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello, Flutter!',
        style: TextStyle(fontSize: 24),
      ),
    );
  }
}

这个示例创建了一个在屏幕中心显示 “Hello, Flutter!” 文本的小部件。

（二）布局（Layout）

  1. Flutter 使用各种布局小部件来排列其他小部件。常见的布局小部件包括Row（水平排列子部件）、Column（垂直排列子部件）、Stack（子部件可以相互堆叠）等。

  2. 例如，使用Column布局小部件来垂直排列两个文本小部件：

收起

dart

复制

import 'package:flutter/material.dart';

class MyLayoutApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Top Text', style: TextStyle(fontSize: 20)),
        Text('Bottom Text', style: TextStyle(fontSize: 20)),
      ],
    );
  }
}

在这个例子中，mainAxisAlignment属性用于设置子部件在主轴（垂直方向）上的对齐方式。

（三）事件处理

  1. 在 Flutter 中，可以通过给小部件添加回调函数来处理事件。例如，对于按钮点击事件，可以使用onPressed属性。

  2. 以下是一个简单的按钮点击事件处理示例：

收起

dart

复制

import 'package:flutter/material.dart';

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

class MyButtonApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Button Example'),
        ),
        body: Center(
          child: RaisedButton(
            child: Text('Click Me'),
            onPressed: () {
              print('Button clicked!');
            },
          ),
        ),
      ),
    );
  }
}

在这个例子中，当用户点击按钮时，会在控制台打印 “Button clicked!”。

五、Flutter 中的资源管理

（一）图片资源

  1. 将图片文件（如.png、.jpg等）放在项目的assets目录下（如果没有，需要创建）。

  2. 在pubspec.yaml文件中，在flutter部分添加以下内容来声明图片资源：

收起

yaml

复制

flutter:
  assets:
    - assets/image.png

3. 在代码中使用Image.asset('assets/image.png')来显示图片。

（二）字体资源

  1. 类似图片资源，将字体文件（如.ttf）放在assets目录下。

  2. 在pubspec.yaml文件中声明字体资源：

收起

yaml

复制

flutter:
  fonts:
    - family: MyCustomFont
      fonts:
        - asset: assets/MyCustomFont.ttf

3. 在代码中可以使用TextStyle来应用自定义字体：

收起

dart

复制

Text(
  'Custom Font Text',
  style: TextStyle(fontFamily: 'MyCustomFont'),
);

六、Flutter 与设备功能交互

（一）网络请求

  1. 在 Flutter 中，可以使用http库（需要在pubspec.yaml中添加http依赖）来进行网络请求。

  2. 以下是一个简单的 GET 请求示例：

收起

dart

复制

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

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

class MyNetworkApp extends StatelessWidget {
  Future<String> fetchData() async {
    final response = await http.get('https://jsonplaceholder.typicode.com/todos/1');
    if (response.statusCode == 200) {
      return response.body;
    } else {
      throw Exception('Failed to load data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Network Example'),
        ),
        body: Center(
          child: FutureBuilder<String>(
            future: fetchData(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data!);
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

这个示例使用http库从一个示例 API 获取数据，并在界面上显示结果或错误信息。

（二）访问设备传感器（如加速度计、陀螺仪等）

  1. 要访问设备传感器，可以使用sensors_plus等相关的 Flutter 插件（需要在pubspec.yaml中添加依赖）。

  2. 以下是一个简单的获取加速度计数据示例（部分代码）：

收起

dart

复制

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

class SensorApp extends StatefulWidget {
  @override
  _SensorAppState createState() => _SensorAppState();
}

class _SensorAppState extends State<SensorApp> {
  List<double> _accelerometerValues = [0, 0, 0];

  @override
  void initState() {
    super.initState();
    accelerometerEvents.listen((AccelerometerEvent event) {
      setState(() {
        _accelerometerValues = [event.x, event.y, event.z];
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sensor Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Accelerometer: ${_accelerometerValues}'),
            ],
          ),
        ),
      ),
    );
  }
}

这个示例监听加速度计事件，并在界面上显示加速度计的值。

以上就是 Flutter 零基础入门的一些基本内容，随着学习的深入，可以进一步探索 Flutter 的高级特性和更多功能。

avatar
文章
阅读
粉丝