Flutter基础视频教程
Flutter基础视频教程
https://www.bilibili.com/video/BV15t411U7yf
P1 00视频学习方法说明
看视频 不看MP4写 不会看文字
Flutter.富啦特
P2 01认识Flutter是什么
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。
Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
官网 https://flutter.io/showcase/
Dart 大
flutter 120fps
120fps超高性能
Flutter采用GPU渲染技术,所以性能极高。
Flutter生态情况
github地址:https://github.com/Solido/awesome-flutter
showcase:https://flutter.io/showcase/
下载 https://docs.flutter.dev/release/archive#windows
flutter doctor
android studio 安卓 s丢
运行没反应 https://blog.csdn.net/m0_53022813/article/details/136827666
安装教程 https://www.cnblogs.com/luyj00436/p/17632117.html
Visual Studio主要用于flutter 桌面软件开发,如果您只是开发flutter app可以不用安装Visual Studio:
marven的部分最好替换一个国内的源,替换步骤如下:
打开flutter根目录
打开文件 packages/flutter_tools/lib/src/http_host_validator.dart
修改其中 kMaven(修改地址如下:http://maven.aliyun.com/nexus/content/groups/public/)
删除 bin/cache
重新执行 flutter doctor就没有报错了
————————————————
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/guliang28/article/details/134087662
P3 02Flutter开发环境搭建windows版
P4 03Flutter虚拟机安装
flutter项目gradle失败的解决方法 https://www.jianshu.com/p/d0cbef34e4db
Platforms:
Android
ios
Linux
MacOS
Web
Windows
旧版 https://www.jb51.net/article/279951.htm
问题 https://blog.csdn.net/weixin_45289656/article/details/136370826
只是显示android问题 https://www.cnblogs.com/openmind-ink/p/17702391.html
运行不了 https://blog.csdn.net/qq_41818873/article/details/133687844
加速 https://www.jianshu.com/p/9cbdf497d54f https://blog.csdn.net/yujunlong3919/article/details/105082443/
P5 04在VSCode下编写Flutter代码
vscode plugins flutter dart
flutter run
独立运行 https://blog.csdn.net/gw6601/article/details/131286911
D:\Android\Sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Pixel_6_Pro_API_VanillaIceCream
adb connect 127.0.0.1:21503
连接失败设备 https://www.jianshu.com/p/e15e8feea95e
P6 05第一个HelloWorld程序
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'welcome to flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcom --- to flutter'),
),
body: Center(
child: Text('hello kooteam'),
),
),
);
}
}
main.dart
环境配置好 项目俩改gradle
P7 06Text Widget使用
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'welcome to flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcom to flutter'),
),
body: Center(
child: Text(
'hello big kooteam Material 3 is the latest version of Google’s open-source design system. Design and build beautiful, usable products with Material 3.',
textAlign: TextAlign.left,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 25.0,
color: Color.fromARGB(255, 255, 0, 255),
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.solid),
),
),
),
);
}
}
P8 07Container Widget 使用1
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'welcome to flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcom to flutter'),
),
body: Center(
child: Container(
child: new Text('hello kooteam', style: TextStyle(fontSize: 40.0)),
alignment: Alignment.center,
width: 500.0,
height: 500.0,
color: Colors.lightBlue,
)),
),
);
}
}
P9 08Container Widget 使用2
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext rcontext) {
return MaterialApp(
title: 'welcome to flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcom to flutter'),
),
body: Center(
child: Container(
child: new Text('hello kooteam', style: TextStyle(fontSize: 40.0)),
alignment: Alignment.topLeft,
width: 500.0,
height: 500.0,
// color: Colors.lightBlue, //decoration 不能同时用
padding: const EdgeInsets.fromLTRB(10.0, 50.0, 0.0, 0.0),
margin: const EdgeInsets.all(20.0),
decoration: new BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.lightBlue, Colors.greenAccent]),
border: Border.all(width: 20.0, color: Colors.red)),
)),
),
);
}
}
P10 09lmage组件的使用
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext rcontext) {
return MaterialApp(
title: 'welcome to flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcom to flutter'),
),
body: Center(
child: Container(
child: new Image.network(
'https://docs.flutter.cn/assets/images/cn/flutter-cn-logo.png',
// repeat: ImageRepeat.repeat,
// fit: BoxFit.fill,
color: Colors.amber,
colorBlendMode: BlendMode.darken, //配合color 混合
),
width: 500.0,
height: 500.0,
color: Colors.lightBlue, //decoration 不能同时用
)),
),
);
}
}
P11 10ListView组件简介
import 'package:app/history/main-container.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// class MyApp extends StatelessWidget {
// @override
// Widget build(BuildContext context) {
// return MaterialApp(
// title: 'Flutter',
// home: Scaffold(
// appBar: new AppBar(title: new Text('Flutter')),
// body: new ListView(
// children: <Widget>[
// new ListTile(
// leading: new Icon(Icons.home),
// title: new Text('home'),
// ),
// new ListTile(
// leading: new Icon(Icons.settings),
// title: new Text('settings'),
// ),
// new ListTile(
// leading: new Icon(Icons.search),
// title: new Text('search'),
// ),
// ],
// ),
// ),
// );
// }
// }
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: new AppBar(
title: new Text('Flutter'),
),
body: new ListView(
children: <Widget>[
new Image.network(
'https://img.yipic.cn/thumb/91859d21/9a93d6f0/b6546f0f/5c54e20d/big_91859d219a93d6f0b6546f0f5c54e20d.jpg?x-oss-process=image/format,webp/sharpen,100'),
new Image.network(
'https://hbimg.b0.upaiyun.com/eba23e5e2d8a5bc01611601059aeef75536b5e9dd190f-M0nAvp_fw658'),
],
),
),
);
}
}
P12 11ListView横向列表的使用
import 'package:app/history/main-container.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: new AppBar(
title: new Text('Flutter'),
),
body: Center(
child: Container(
child: MyList(),
height: 180.0,
),
)),
);
}
}
class MyList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Container(
width: 180,
height: 180,
color: Color(0xffff0000), //argb
),
new Container(
width: 180,
height: 180,
color: Colors.deepOrange,
),
new Container(
width: 180,
height: 180,
color: Colors.lightBlue,
),
new Container(
width: 180,
height: 180,
color: Colors.greenAccent,
),
],
);
}
}
P13 12ListView动态列表的使用
List()
List(100);
List<String>();
[1,2,3]
相当于数组
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() =>
runApp(MyApp(items: new List<String>.generate(500, (i) => "item $i")));
class MyApp extends StatelessWidget {
final List<String> items;
//视频
// MyApp({Key key, @required this.items}) : super(key: key);
MyApp({Key? key, required this.items}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: new AppBar(
title: new Text('Flutter'),
),
body: new ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return new ListTile(
title: new Text('${items[index]}'),
);
})),
);
}
}
P14 13GridView网格列表的使用
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
// class MyApp extends StatelessWidget {
// @override
// Widget build(BuildContext context) {
// return MaterialApp(
// title: 'Flutter',
// home: Scaffold(
// appBar: new AppBar(
// title: new Text('Flutter'),
// ),
// body: GridView.count(
// crossAxisCount: 3,
// padding: const EdgeInsets.all(20.0),
// crossAxisSpacing: 10.0,
// children: <Widget>[
// const Text('hello world'),
// const Text('hello world'),
// const Text('hello world'),
// const Text('hello world'),
// const Text('hello world'),
// const Text('hello world'),
// ],
// )),
// );
// }
// }
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: new AppBar(
title: new Text('Flutter'),
),
body: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 0.7),
children: <Widget>[
Image.network(
'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
fit: BoxFit.cover,
),
new Image.network(
'http://img5.mtime.cn/mt/2024/06/17/095749.40636015_1280X720X2.jpg',
fit: BoxFit.cover,
),
new Image.network(
'http://img5.mtime.cn/mt/2024/07/15/121951.12176160_1280X720X2.jpg',
fit: BoxFit.cover,
),
new Image.network(
'http://img5.mtime.cn/mt/2024/05/27/165144.27828479_o.jpg',
fit: BoxFit.cover,
),
new Image.network(
'http://img5.mtime.cn/mt/2024/06/17/101019.88610600_1280X720X2.jpg',
fit: BoxFit.cover,
),
new Image.network(
'http://img5.mtime.cn/mt/2024/06/11/110152.25918170_1280X720X2.jpg',
fit: BoxFit.cover,
),
new Image.network(
'http://img5.mtime.cn/mt/2024/06/18/111247.62696038_1280X720X2.jpg',
fit: BoxFit.cover,
),
new Image.network(
'http://img5.mtime.cn/mt/2024/07/08/110427.18018843_1280X720X2.jpg',
fit: BoxFit.cover,
),
new Image.network(
'http://img5.mtime.cn/mt/2024/06/19/104303.47347165_1280X720X2.jpg',
fit: BoxFit.cover,
),
],
)),
);
}
}
P15 14布局RowWidget的详细讲解
btn https://www.jianshu.com/p/5553055c2da6 https://www.jianshu.com/p/29160aebe1da
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: new AppBar(
title: new Text('Flutter'),
),
body: new Row(
children: <Widget>[
// new RaisedButton(), //这个按钮新版废弃
new ElevatedButton(
onPressed: () => {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red)),
child: new Text('button'),
),
//Expanded =flex 1
Expanded(
child: new ElevatedButton(
onPressed: () => {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red)),
child: new Text('button'),
),
),
new ElevatedButton(
onPressed: () => {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
child: new Text('button'),
),
],
)),
);
}
}
Expanded 灵活布局
P16 15布局ColumnWidget垂直布局组件
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: new AppBar(
title: new Text('Flutter'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Text('hello fluter'),
Expanded(
child: new Text('I can vue react angular uniapp taro'),
),
new Text('hello fluter'),
],
)),
);
}
}
P17 16布局StackWidget层叠布局
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var stack = new Stack(
// alignment: Alignment.center,
alignment: const FractionalOffset(0.5, 0.8),
children: [
new CircleAvatar(
backgroundImage: new NetworkImage(
'https://i0.hdslb.com/bfs/face/dd2d557d69d28f43066f4bab6bd4fc40f03d2205.jpg'),
radius: 100.0,
),
new Container(
decoration: new BoxDecoration(color: Colors.lightBlue),
padding: EdgeInsets.all(5.0),
child: new Text('KooTeam'),
)
],
);
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: new AppBar(
title: new Text('Flutter'),
),
body: Center(
child: stack,
)),
);
}
}
P18 17布局PositionedWidget层叠定位组件
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var stack = new Stack(
// alignment: Alignment.center,
// alignment: const FractionalOffset(0.5, 0.8),
children: [
new CircleAvatar(
backgroundImage: new NetworkImage(
'https://i0.hdslb.com/bfs/face/dd2d557d69d28f43066f4bab6bd4fc40f03d2205.jpg'),
radius: 100.0,
),
new Positioned(
child: Text('KooTeam'),
top: 0,
left: 0,
),
new Positioned(
child: Text('JohnKing'),
bottom: 0,
right: 0,
)
],
);
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: new AppBar(
title: new Text('Flutter'),
),
body: Center(
child: stack,
)),
);
}
}
P19 18布局CardWidget卡片布局组件
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var card = new Card(
child: Column(
children: [
ListTile(
title: Text(
'KooTeam',
style: TextStyle(fontWeight: FontWeight.w600),
),
subtitle: Text('KooTeam is big Team'),
leading: Icon(
Icons.telegram,
color: Colors.lightBlue,
),
),
Divider(),
ListTile(
title: Text(
'KooTeam',
style: TextStyle(fontWeight: FontWeight.w600),
),
subtitle: Text('KooTeam is big Team'),
leading: Icon(
Icons.telegram,
color: Colors.lightBlue,
),
),
Divider(),
ListTile(
title: Text(
'KooTeam',
style: TextStyle(fontWeight: FontWeight.w600),
),
subtitle: Text('KooTeam is big Team'),
leading: Icon(
Icons.telegram,
color: Colors.lightBlue,
),
),
],
),
);
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: new AppBar(
title: new Text('Flutter'),
),
body: Center(
child: card,
)),
);
}
}
P20 19导航父子页面的跳转返回
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Flutter Navigator',
home: new FristScreen(),
));
}
class FristScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('FristSreen'),
),
body: Center(
child: ElevatedButton(
child: Text('goSecond'),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (contxt) => new SecondScreen()));
},
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('FristSreen'),
),
body: Center(
child: ElevatedButton(
child: Text('goFrist'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}
P21 20导航的参数传递和接受-1
快速生成 插件 Awesome Flutter Snippets
stlss 快捷键
P22 21导航的参数传递和接受-2
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class Product {
final String title;
final String des;
Product(this.title, this.des);
}
void main() {
runApp(MaterialApp(
title: 'Flutter',
home: MyList(
products: List.generate(20, (i) => Product('KooTeam Products', '$i')),
),
));
}
class MyList extends StatelessWidget {
final List<Product> products;
MyList({Key? key, required this.products}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Products'),
),
body: ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
return ListTile(
title: Text('${products[index].title},${products[index].des}'),
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (contxt) {
//传悌 参数
return new ProductDetail(product: products[index]);
}));
},
);
},
),
);
}
}
class ProductDetail extends StatelessWidget {
final Product product;
const ProductDetail({Key? key, required this.product}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Product Detail'),
),
body: Center(
child: Text('this is product detail ${product.des}'),
),
);
}
}
P23 22页面跳转并返回数据
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
title: 'Flutter',
home: First(),
));
}
class First extends StatelessWidget {
const First({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First'),
),
body: Center(
child: ElevatedButton(
child: Text('选择'),
onPressed: () {
_navigatorToAv(context);
},
),
),
);
}
_navigatorToAv(BuildContext context) async {
var result =
await Navigator.push(context, MaterialPageRoute(builder: (context) {
return new Second();
}));
// Scaffold.of(context).showSnackBar(SnackBar(content: Text('$result'))); //旧版
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('$result')));
}
}
class Second extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First'),
),
body: Column(
children: [
ElevatedButton(
onPressed: () {
Navigator.pop(context, 'KooTeam');
},
child: Text('KooTeam')),
ElevatedButton(
onPressed: () {
Navigator.pop(context, 'JohnKing');
},
child: Text('JohnKing')),
],
),
);
}
}
P24 23静态资源和项目图片的处理
pubspec.yaml
assets:
- images/code.png
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
title: 'flutter',
home: Home(),
));
class Home extends StatelessWidget {
const Home({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: Image.asset('images/code.png'),
);
}
}
P25 24Flutter的打包
生成 keystore key.jks 不要分享出去
改配置
flutter build apk
flutter install
https://docs.flutter.cn/deployment/android
123456 C:\Users\koo\upload-keystore.jks
https://juejin.cn/post/7207078219215929402
flutter 命令
https://juejin.cn/post/7012078797033848862
创建flutter项目文件 flutter create demo
flutter upgrade 升级
可以加不加 const new 组件 不推荐new 推荐直接写
vs工作负荷
最新Visual Studio的安装与使用 - 工作负荷选择 c语言 | 手把手基础教学_vs工作负荷怎么选-CSDN博客
visual studio安装好后,如何添加新的工作负载和组件_visual studio哪里安装component-CSDN博客
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库