当前位置：首页 > news >正文

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

news 2025/7/14 7:12:43

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

解压码：stwq

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

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

Dart 语言概览 Flutter 使用的是 Dart 语言。如果你有使用其他面向对象语言的经验，像是 Java、C++ 或 Swift， Dart 应该对你来说不会陌生，你可以轻松学习这门语言。
编写你的第一个 Flutter 应用该编程练习 (codelab) 将通过创建一个可以在移动端、桌面端以及 Web 端运行的应用来学习 Flutter 的基础知识。
学习基础知识这是一篇针对新 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.devversion: 0.0.1+1environment:sdk: '>=2.19.4 <4.0.0'dependencies:flutter:sdk: flutterenglish_words: ^4.0.0provider: ^6.0.0dev_dependencies:flutter_test:sdk: flutterflutter_lints: ^2.0.0flutter:uses-material-design: true

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

include: package:flutter_lints/flutter.yamllinter:rules:prefer_const_constructors: falseprefer_final_fields: falseuse_key_in_widget_constructors: falseprefer_const_literals_to_create_immutables: falseprefer_const_constructors_in_immutables: falseavoid_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});@overrideWidget 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 {@overrideWidget build(BuildContext context) {var appState = context.watch<MyAppState>();return Scaffold(body: Column(children: [Text('A random idea:'),Text(appState.current.asLowerCase),],),);}
}