首页手记 Flutter入门资料：新手必看的简单教程

Flutter入门资料：新手必看的简单教程

标签：

移动开发

概述

本文介绍了如何搭建Flutter开发环境并创建第一个Flutter应用，提供了丰富的flutter入门资料，包括基本组件的使用、布局与样式、导航与状态管理以及数据处理与网络请求等内容。

Flutter简介与环境搭建

Flutter简介

Flutter是由Google开发的一个开源UI框架，用于构建跨平台的移动应用。它支持Android和iOS，同时也可以用于Web和桌面应用的开发。Flutter的最大优势在于，它能够使用一套代码库为多种平台创建高性能的应用程序。其特点是快速启动、高保真度、丰富的组件库和易于定制的设计语言。

开发环境搭建

在开始使用Flutter之前，你需要先搭建好开发环境。以下是搭建Flutter环境的步骤：

安装SDK
- 首先，下载Flutter SDK。访问Flutter官方网站（https://flutter.dev/）并下载适用于你的操作系统的SDK。
- 解压下载的SDK文件，并将其移动到你的开发环境目录中。
- 打开命令行工具，运行以下命令以验证Flutter是否正确安装：
```
flutter doctor
```
  运行此命令会检查你的开发环境，并列出必要的配置步骤。
配置环境变量
- 如果你的系统没有配置Flutter的环境变量，你需要手动添加。以下是Windows和Linux的配置步骤：
  - Windows:
```
set PATH=%PATH%;C:\path\to\flutter\bin
```
  - Linux/Mac:
```
export PATH=$PATH:/path/to/flutter/bin
```
安装IDE
- 推荐使用IntelliJ IDEA或VS Code作为Flutter的集成开发环境（IDE）。
- 安装Flutter插件，可以方便地调试Flutter应用。

第一个Flutter应用

创建一个简单的“Hello, World!”应用，以验证Flutter环境是否搭建成功。

初始化项目
- 使用命令行工具，在你的工作目录中创建一个新项目：
```
flutter create first_flutter_app
```
- 这将创建一个新的Flutter项目，并生成一些基本的文件和目录结构。

打开项目

打开生成的项目文件夹，使用你选择的IDE打开项目。

在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(title: 'Flutter Demo Home Page'),
 );
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);

final String title;

@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(widget.title),
   ),
   body: Center(
     child: Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: <Widget>[
         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),
   ),
 );
}
}

运行应用
- 在命令行中，进入项目目录并运行以下命令：
```
flutter run
```
- 应用将在模拟器或连接的设备上启动，显示一个带有计数器的简单界面。

基本组件使用

文本与按钮

文本组件

import 'package:flutter/material.dart';

void main() {
runApp(
  MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Hello, Flutter!'),
      ),
      body: Center(
        child: Text(
          'Hello, Flutter!',
          style: TextStyle(fontSize: 20, color: Colors.blue),
        ),
      ),
    ),
  ),
);
}

按钮组件

import 'package:flutter/material.dart';

void main() {
runApp(
  MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Hello, Flutter!'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            print('Button pressed!');
          },
          child: Text('Press Me'),
        ),
      ),
    ),
  ),
);
}

图像与图标

图像组件

import 'package:flutter/material.dart';

void main() {
runApp(
  MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Image Demo'),
      ),
      body: Center(
        child: Image.network(
          'https://example.com/image.jpg',
          width: 100,
          height: 100,
        ),
      ),
    ),
  ),
);
}

图标组件

import 'package:flutter/material.dart';

void main() {
runApp(
  MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Icon Demo'),
      ),
      body: Center(
        child: Icon(
          Icons.star,
          size: 50,
          color: Colors.amber,
        ),
      ),
    ),
  ),
);
}

列表与卡片

列表组件

import 'package:flutter/material.dart';

void main() {
runApp(
  MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('List Demo'),
      ),
      body: ListView(
        children: [
          ListTile(
            title: Text('Item 1'),
            subtitle: Text('Sub Item 1'),
          ),
          ListTile(
            title: Text('Item 2'),
            subtitle: Text('Sub Item 2'),
          ),
        ],
      ),
    ),
  ),
);
}

卡片组件

import 'package:flutter/material.dart';

void main() {
runApp(
  MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Card Demo'),
      ),
      body: Center(
        child: Card(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              const ListTile(
                leading: Icon(Icons.album),
                title: Text('The Enchanted Forest'),
                subtitle: Text('Lorem ipsum dolor sit amet'),
              ),
            ],
          ),
        ),
      ),
    ),
  ),
);
}

布局与样式

常用布局方式

列布局（Column）

import 'package:flutter/material.dart';

void main() {
runApp(
  MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Column Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Child 1'),
            Text('Child 2'),
            Text('Child 3'),
          ],
        ),
      ),
    ),
  ),
);
}

行布局（Row）

import 'package:flutter/material.dart';

void main() {
runApp(
  MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Row Demo'),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Child 1'),
            Text('Child 2'),
            Text('Child 3'),
          ],
        ),
      ),
    ),
  ),
);
}

栅格布局（GridView）

import 'package:flutter/material.dart';

void main() {
runApp(
  MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('GridView Demo'),
      ),
      body: GridView.count(
        crossAxisCount: 3,
        children: List.generate(9, (index) {
          return Center(
            child: Text('Item $index'),
          );
        }),
      ),
    ),
  ),
);
}

样式与主题

自定义样式

import 'package:flutter/material.dart';

void main() {
runApp(
  MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Styled Text Demo'),
      ),
      body: Center(
        child: Text(
          'Styled Text',
          style: TextStyle(
            fontSize: 20,
            color: Colors.red,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic,
            backgroundColor: Colors.yellow,
          ),
        ),
      ),
    ),
  ),
);
}

定义主题

import 'package:flutter/material.dart';

void main() {
runApp(
  MaterialApp(
    theme: ThemeData(
      primarySwatch: Colors.blue,
      fontFamily: 'Roboto',
      textTheme: TextTheme(
        bodyText1: TextStyle(fontSize: 20),
      ),
    ),
    home: Scaffold(
      appBar: AppBar(
        title: Text('Theme Demo'),
      ),
      body: Center(
        child: Text('Theme Text'),
      ),
    ),
  ),
);
}

响应式布局

使用MediaQuery

import 'package:flutter/material.dart';

void main() {
runApp(
  MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Responsive Layout Demo'),
      ),
      body: Center(
        child: MediaQuery.of(context).size.width > 600
            ? Text('Wide Screen')
            : Text('Narrow Screen'),
      ),
    ),
  ),
);
}

导航与状态管理

页面导航

简单导航

import 'package:flutter/material.dart';

void main() {
runApp(
  MaterialApp(
    title: 'Navigation Demo',
    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: Text('Hello from Second Page'),
    ),
  );
}
}

路由管理

动态路由

import 'package:flutter/material.dart';

void main() {
runApp(
  MaterialApp(
    title: 'Dynamic Route Demo',
    onGenerateRoute: (settings) {
      final args = settings.arguments;
      if (settings.name == '/second') {
        return MaterialPageRoute(
          builder: (context) => SecondPage(args),
        );
      }
      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',
            arguments: 'Hello, Second Page',
          );
        },
        child: Text('Go to Second Page'),
      ),
    ),
  );
}
}

class SecondPage extends StatelessWidget {
final String args;

SecondPage(this.args);

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Second Page'),
    ),
    body: Center(
      child: Text('Received: $args'),
    ),
  );
}
}

简单的状态管理

使用Provider

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

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

class Counter with ChangeNotifier {
int _count = 0;

int get count => _count;

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Counter Demo'),
      ),
      body: Center(
        child: CounterWidget(),
      ),
    ),
  );
}
}

class CounterWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
  final counter = Provider.of<Counter>(context);
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('Count: ${counter.count}'),
      ElevatedButton(
        onPressed: () {
          counter.increment();
        },
        child: Text('Increment'),
      ),
    ],
  );
}
}

数据处理与网络请求

JSON解析

解析JSON

import 'dart:convert';

void main() {
final jsonStr = '''
{
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "Anytown"
  }
}
''';

final jsonMap = json.decode(jsonStr);
print(jsonMap['name']); // John Doe
print(jsonMap['address']['city']); // Anytown
}

使用Future与异步处理

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

Future<void> main() async {
final url = 'https://jsonplaceholder.typicode.com/todos/1';
final response = await HttpClient().getUrl(Uri.parse(url));
final responseBody = await response.close();
final jsonStr = await responseBody.transform(utf8.decoder).join();
final jsonMap = json.decode(jsonStr);
print(jsonMap['title']);
}

网络请求

GET请求

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

void main() async {
final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/todos/1'));
if (response.statusCode == 200) {
  final jsonMap = json.decode(response.body);
  print(jsonMap['title']);
} else {
  print('Failed to load data');
}
}

POST请求

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

void main() async {
final url = 'https://jsonplaceholder.typicode.com/posts';
final response = await http.post(
  Uri.parse(url),
  headers: <String, String>{
    'Content-Type': 'application/json; charset=UTF-8',
  },
  body: jsonEncode(<String, dynamic>{
    'title': 'Flutter POST Example',
    'body': 'This is a POST request in Flutter',
    'userId': 1,
  }),
);

if (response.statusCode == 201) {
  print('Post created successfully');
} else {
  print('Failed to create post');
}
}

数据缓存

使用SharedPreferences

import 'package:shared_preferences/shared_preferences.dart';

Future<void> main() async {
final prefs = await SharedPreferences.getInstance();
prefs.setString('key', 'value');
final value = prefs.getString('key');
print(value); // value
}

小项目实战

项目需求分析

假设我们正在开发一个简单的天气应用，需要实现以下功能：

显示当前天气信息（温度、湿度、风速等）
支持城市选择与添加
支持实时更新天气信息

功能实现

获取天气数据

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

Future<Map<String, dynamic>> fetchWeather(String city) async {
final url = 'https://api.openweathermap.org/data/2.5/weather?q=$city&appid=YOUR_API_KEY&units=metric';
final response = await http.get(Uri.parse(url));

if (response.statusCode == 200) {
  return json.decode(response.body);
} else {
  throw Exception('Failed to load weather data');
}
}

void main() {
runApp(
  MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Weather App'),
      ),
      body: Center(
        child: FutureBuilder<Map<String, dynamic>>(
          future: fetchWeather('London'),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text('Temperature: ${snapshot.data!['main']['temp']}°C');
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            }

            return CircularProgressIndicator();
          },
        ),
      ),
    ),
  ),
);
}

城市选择与添加

import 'package:flutter/material.dart';

void main() {
runApp(
  MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('City Picker'),
      ),
      body: Center(
        child: TextField(
          decoration: InputDecoration(
            labelText: 'Enter a city',
          ),
          onSubmitted: (value) {
            print('Selected city: $value');
          },
        ),
      ),
    ),
  ),
);
}

实时更新天气信息

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

Future<Map<String, dynamic>> fetchWeather(String city) async {
final url = 'https://api.openweathermap.org/data/2.5/weather?q=$city&appid=YOUR_API_KEY&units=metric';
final response = await http.get(Uri.parse(url));

if (response.statusCode == 200) {
  return json.decode(response.body);
} else {
  throw Exception('Failed to load weather data');
}
}

class WeatherWidget extends StatefulWidget {
@override
_WeatherWidgetState createState() => _WeatherWidgetState();
}

class _WeatherWidgetState extends State<WeatherWidget> {
String _city = 'London';
Map<String, dynamic> _weatherData;

@override
void initState() {
  super.initState();
  _fetchWeather();
  Timer.periodic(Duration(minutes: 1), (Timer t) => _fetchWeather());
}

Future<void> _fetchWeather() async {
  final data = await fetchWeather(_city);
  setState(() {
    _weatherData = data;
  });
}

@override
Widget build(BuildContext context) {
  return Center(
    child: _weatherData != null
        ? Text('Temperature: ${_weatherData['main']['temp']}°C')
        : CircularProgressIndicator(),
  );
}
}

void main() {
runApp(
  MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Weather App'),
      ),
      body: WeatherWidget(),
    ),
  ),
);
}

项目打包与发布

打包应用
```
flutter build apk
flutter build ios
```
发布到Google Play
- 登录Google Play开发者控制台。
- 创建一个新的应用列表。
- 提交应用的APK文件。
- 提交应用信息及截图。
- 审核通过后，应用即可在Google Play上发布。
发布到Apple App Store
- 登录App Store Connect。
- 创建一个新的应用列表。
- 提交应用的IPA文件。
- 提交应用信息及截图。
- 审核通过后，应用即可在App Store上发布。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

Qyouu

手记
篇

粉丝

88

获赞与收藏

414

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 31204 346

网络编程入门教程

20个小节 12758 240

Pandas 入门教程

25个小节 18652 347

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空