前端开发工具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),],),);}
}
其他平台的开发经验
#
-
给 Android 开发者的 Flutter 指南
-
给 SwiftUI 开发者的 Flutter 指南
-
给 UIKit 开发者的 Flutter 指南
-
给 React Native 开发者的 Flutter 指南
-
给 Web 开发者的 Flutter 指南
-
给 Xamarin.Forms 开发者的 Flutter 指南