文章目录
- 前言
- 一、创建
- 二、main.dart
- 三、pubspec.yaml
前言
紧接着上一篇，完成了在windows平台的Flutter开发环境搭建，本片从如何创建一个Flutter项目开始，逐步属性Flutter的工程项目目录结构。
一、创建
- Android Studio （准备好相关环境）
- 创建
- 选择Flutter Application
4. 创建成功
二、main.dart
页面实现的逻辑很简单就是有一个int的变量展示在界面上，点击按钮时执行+1的操作，此时数据发生了改变，更新UI。
import 'package:flutter/material.dart';
/// 入口函数
void main() {
//将小部件挂载
runApp(MyApp());
}
///
/// StatelessWidget： 是一个无状态的widget,可以理解为一个小部件或者小组件的父类。
/// MyApp: 我们自己写的一个小部件，小组件
/// 这里相当于Android中的Application类
///
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(// android 设计风格的App
title: 'Flutter Demo',
theme: ThemeData(//主题相关配置
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),//指定了启动后显示的页面
);
}
}
///
/// 启动后显示的页面
/// StatefulWidget： 有状态的widget,可以根据数据的变化改变UI
///
class MyHomePage extends StatefulWidget {
//构造方法，传入了显示的标题
//{}:为可选参数
MyHomePage({Key key, this.title}) : super(key: key);//向父类传递了key，可以唯一标识当前的widget
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
///
/// MyHomePage的状态管理类
/// _ : 私有的意思，只能在当前文件中使用
///
class _MyHomePageState extends State<MyHomePage> {
//一个int的变量初始值为0
int _counter = 0;
//没有返回值的方法，对变量进行+1操作
void _incrementCounter() {
//数据发生变化的时候更新UI
setState(() {
_counter++;
});
}
//构建显示的内容
@override
Widget build(BuildContext context) {
return Scaffold(//android 设计风格中的一个模板
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(//一个按钮点击触发+1的方法
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
三、pubspec.yaml
# 包名称，也是最终打包成Apk的包名称
name: flutter_app
# 关于此App的描述信息
description: A new Flutter application.
# 此处是如果将当前包发布发哦pub.dev仓库，在仓库中显示的标题
publish_to: 'none'
# 当前包的版本信息
# 语义版本号
# + 号之前 版本名称 versionName
# + 之后 版本code versionCode
# 对应 android app build.gradle 中的配置
version: 1.0.0+1
# 环境依赖
environment:
# dart sdk 版本要求
sdk: ">=2.7.0 <3.0.0"
# 也可以添加flutter sdk 版本要求
flutter: "1.22.3"
# 生产依赖：都会被编译打包
dependencies:
flutter:
sdk: flutter
# 依赖 pub.dev 上的第三方库
# ^ : 大版本保持不变，小版本号获取最新的
cupertino_icons: ^1.0.0
# 不指定或者any 拉取最新版本的包
# dio:
# dio: any
# 明确指定版本号
# dio: 3.0.10
# 区间执行版本号
# path_provider: <=1.6.22
# path_provider: <1.6.22
# path_provider: '>=1.0.0 <1.6.22'
# 依赖本地库
# flutter_package:
# path: ../flutter_package
# 依赖 git repository
# bloc:
# git:
# url: https://github.com/felangel/bloc.git
# ref: bloc_fixes_issue_110
# path: packages/bloc
# 依赖自己的 pub 仓库:
# bloc:
# hosted:
# name: bloc
# url: http://your-package-server.com
# version: ^6.0.0
# 解决包冲突 同一规定使用固定的版本
# dependency_overrides:
# path_provider: ^1.6.22
# 开发依赖、运行时依赖
dev_dependencies:
flutter_test:
sdk: flutter
# flutter 相关配置
flutter:
# 确保应用程序中包含Material Icons字体，以便可以使用material Icons类中的图标
uses-material-design: true
# 静态资源引入
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
# 平台适配
# plugin:
# platforms:
# android:
# package: com.flutter.app_market
# pluginClass: AppMarketPlugin
# ios:
# pluginClass: AppMarketPlugin
# macos:
# default_package: app_market_macos
# web:
# default_package: app_market_web
整个工程的相关信息，资源管理、包管理等。
参考文章: 【Flutter 实战】pubspec.yaml 配置文件详解.