第一个 Flutter 项目（1）共46节

前端开发工具vs code，安装Flutter sdk，如果你的下载速度比较慢，可以选择这个 flutter sdk

解压码：stwq

配置可以看这Flutter 新建工程一直等待 解决办法-CSDN博客

如果你是新的 Flutter 开发者，我们建议你按顺序学习以下资源：

1. Dart 语言概览 Flutter 使用的是 Dart 语言。如果你有使用其他面向对象语言的经验，像是 Java、C++ 或 Swift， Dart 应该对你来说不会陌生，你可以轻松学习这门语言。

2. 编写你的第一个 Flutter 应用 该编程练习 (codelab) 将通过创建一个可以在移动端、桌面端以及 Web 端运行的应用来学习 Flutter 的基础知识。

3. 学习基础知识 这是一篇针对新 Flutter 开发者且有明确指导性的文档，会引导你了解构建 Flutter 应用的重要部分。

一、初始化项目

启动 Visual Studio Code 并打开命令面板（使用 F1、Ctrl+Shift+P 或 Shift+Cmd+P）。开始输入“flutter new”。选择 Flutter: New Project 命令。

然后，选择路径和命名项目即可等待安装完毕。

二、配置项目

2.1 将pubspec.yaml文件的内容替换为以下内容。

name: namer_app
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 0.0.1+1

environment:
  sdk: '>=2.19.4 <4.0.0'

dependencies:
  flutter:
    sdk: flutter

  english_words: ^4.0.0
  provider: ^6.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

2.2 将analysis_options.yaml替换为一下内容：

include: package:flutter_lints/flutter.yaml

linter:
  rules:
    prefer_const_constructors: false
    prefer_final_fields: false
    use_key_in_widget_constructors: false
    prefer_const_literals_to_create_immutables: false
    prefer_const_constructors_in_immutables: false
    avoid_print: false

此文件决定了 Flutter 在分析代码时的严格程度。由于这是您第一次使用 Flutter，您可以让分析器不用太严格。此后，您可以随时进行调整。事实上，在邻近发布实际正式版应用的阶段，您几乎肯定会希望分析器更加严格。

最后，打开 lib/ 目录下的 main.dart 文件。

将此文件的内容替换为以下内容。lib/ main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    return Scaffold(
      body: Column(
        children: [
          Text('A random idea:'),
          Text(appState.current.asLowerCase),
        ],
      ),
    );
  }
}

其他平台的开发经验

#

• 给 Android 开发者的 Flutter 指南

• 给 SwiftUI 开发者的 Flutter 指南

• 给 UIKit 开发者的 Flutter 指南

• 给 React Native 开发者的 Flutter 指南

• 给 Web 开发者的 Flutter 指南

• 给 Xamarin.Forms 开发者的 Flutter 指南