前端开发工具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.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 指南