flutter实验-widget的使用 1. Flutter开发环境部署1.1 配置Flutter开发环境配置Flutter SDK开发环境去flutter官网下载其最新可用的安装包 Flutter SDK下载将安装包zip解压到你想安装Flutter SDK的路径（如：C:\src\flutter；注意，不要将flutter安装到需要一些高权限的路径如C:\Program Files\）。在Flutter安装目录的flutter文件下找到 flutter_console.bat，双击运行并启动flutter命令行，接下来，你就可以在Flutter命令行运行flutter命令了。注意： 由于一些flutter命令需要联网获取数据，如果您是在国内访问，由于众所周知的原因，直接访问很可能不会成功。 下面的PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google为国内开发者搭建的临时镜像。大家可以将如下环境变量加入到用户环境变量中：export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn上述命令为当前终端窗口临时设置PATH变量。要将Flutter永久添加到路径中，请添加到环境变量文件中。检查Flutter状态打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装。flutter doctor // flutter doctor -v 查看详细检查信息第一次运行一个flutter命令（如flutter doctor）时，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。更新Flutter版本若要更新Flutter版本，可以使用命令flutter upgrade进行更新。1.2 Flutter的使用创建项目通过以下命令创建一个flutter_app。flutter create flutter_app上述命令创建一个Flutte让项目，项目名为flutter_app。在项目目录中，您的应用程序的代码位于 lib/main.dart，并且在整个项目中，需要编写的代码都在lib目录下，其他目录中的代码最好不要改动。运行项目通过以下命令可以运行当前flutter项目flutter run2 Flutter开发教程基本概念Widget基本的flutter源码如下所示。import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("flutterApp"), centerTitle: true, ), body: const Center(child: Text("hello world")), floatingActionButton: FloatingActionButton( child: Text("buttom"), onPressed: () => {print("onclick buttom")}), ), title: "flutterApp", theme: ThemeData(backgroundColor: Colors.blue), ); } } 字体、风格、粗细import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("flutterApp"), centerTitle: true, backgroundColor: Colors.red[300], ), body: const Center( child: Text( "hello world", style: TextStyle( fontWeight: FontWeight.bold, letterSpacing: 10, color: Colors.blue), )), floatingActionButton: FloatingActionButton( child: Text("buttom"), onPressed: () => {print("onclick buttom")}), ), title: "flutterApp", theme: ThemeData(backgroundColor: Colors.blue), ); } } 抽取代码、重组技巧、创建Widget技巧import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Home(), title: "flutterApp", theme: ThemeData(backgroundColor: Colors.blue), ); } } class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("flutterApp"), centerTitle: true, backgroundColor: Colors.red[300], ), body: const Center( child: Text( "hello world", style: TextStyle( fontWeight: FontWeight.bold, letterSpacing: 10, color: Colors.blue), )), floatingActionButton: FloatingActionButton( child: Text("buttom"), onPressed: () => {print("onclick buttom")}), ); } } 加载本地图片和网络图片网络加载图片import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp(home: Home()); } } class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("flutterApp"), centerTitle: true, backgroundColor: Colors.red[300], ), body: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ Image.network( "https://q.qlogo.cn/g?b=qq&k=PZud1NP3W7DEUY0L9N0p4w&s=100&t=1645425342"), Image( image: NetworkImage( "https://q.qlogo.cn/g?b=qq&k=PZud1NP3W7DEUY0L9N0p4w&s=100&t=1645425342")) ], )); } } 一般加载网络图片可以使用以上两种方法。本地加载图片首先在项目的根目录中创建一个用于存放图片的文件夹assets修改pubspec.yaml文件，添加图片import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp(home: Home()); } } class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("flutterApp"), centerTitle: true, backgroundColor: Colors.red[300], ), body: Image(image: AssetImage("assets/1.gif"))); } } 添加按钮以及图标和文字import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp(home: Home()); } } class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("flutterApp"), ), body: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ IconButton( onPressed: () { print("hello world"); }, icon: Icon(Icons.access_alarm), color: Colors.blue, ), TextButton(onPressed: () {}, child: Text("button")), BackButton() ], )); } }Padding和Margin的使用Paddingimport 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp(home: Home()); } } class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("flutterApp"), ), body: Padding( // padding: EdgeInsets.all(80), // padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20), padding: EdgeInsets.fromLTRB(10, 12, 1, 9), child: Text("hello world"))); } }Marginimport 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp(home: Home()); } } class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("flutterApp"), ), body: Container( margin: EdgeInsets.all(20), padding: EdgeInsets.all(3), child: Text("hello world"), color: Colors.blue, )); } }Row行的创建[event finish='false']待完成[/event]Column列的创建[event finish='false']待完成[/event]Outline快捷方式[event finish='false']待完成[/event]Expended的使用[event finish='false']待完成[/event]如何制作一张卡片import 'package:flutter/material.dart'; class UserInfo extends StatelessWidget { const UserInfo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("个人信息"), centerTitle: true, ), body: Padding( padding: EdgeInsets.fromLTRB(30, 40, 30, 10), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Center( child: CircleAvatar( // backgroundImage: AssetImage("assets/1.gif"), backgroundImage: NetworkImage( "https://q.qlogo.cn/g?b=qq&k=PZud1NP3W7DEUY0L9N0p4w&s=100&t=1645425342"), radius: 45, ), ), Divider( height: 60, color: Colors.blue, ), Text( "HSM", style: TextStyle(color: Colors.blue, letterSpacing: 2), ), SizedBox( height: 10, ), Text( "Handsome", style: TextStyle( color: Colors.black45, ), ), SizedBox( height: 10, ), Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Icon( Icons.mail, color: Colors.green, ), SizedBox( width: 10, ), Text("905008677@qq.com") ], ) ], ), ), ); } } 如何改变状态值来更新界面UI使用provider插件来实现更新界面provider.dartimport 'package:flutter/cupertino.dart'; class CountModel with ChangeNotifier { int _count = 0; int get count => _count; // 修改数据，并调用notify void increase() { _count++; // 修改数据后调用nitify方法 notifyListeners(); } }main.dartimport 'package:flutter/material.dart'; import 'package:flutter_seat_app/pages/userinfo.dart'; import 'package:flutter_seat_app/providers/provider.dart'; import 'package:provider/provider.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MultiProvider( providers: [ ChangeNotifierProvider(create: (_) => CountModel()), ], child: MaterialApp(home: UserInfo()), ); } } class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("flutterApp"), ), body: Container( margin: EdgeInsets.all(20), padding: EdgeInsets.all(3), child: Text("hello world"), color: Colors.blue, )); } } pages/userinfo.dartimport 'package:flutter/material.dart'; import 'package:flutter_seat_app/providers/provider.dart'; import 'package:provider/provider.dart'; class UserInfo extends StatelessWidget { const UserInfo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("个人信息"), centerTitle: true, ), body: Padding( padding: EdgeInsets.fromLTRB(30, 40, 30, 10), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Center( child: CircleAvatar( // backgroundImage: AssetImage("assets/1.gif"), backgroundImage: NetworkImage( "https://q.qlogo.cn/g?b=qq&k=PZud1NP3W7DEUY0L9N0p4w&s=100&t=1645425342"), radius: 45, ), ), Divider( height: 60, color: Colors.blue, ), Text( "HSM", style: TextStyle(color: Colors.blue, letterSpacing: 2), ), SizedBox( height: 10, ), Consumer<CountModel>(builder: (ctx, counter, child) { return Text( "数量：${counter.count}", style: TextStyle( color: Colors.black45, ), ); }), SizedBox( height: 10, ), Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Icon( Icons.mail, color: Colors.green, ), SizedBox( width: 10, ), Text("905008677@qq.com") ], ) ], ), ), floatingActionButton: Consumer<CountModel>(builder: (ctx, count, child) { return FloatingActionButton( onPressed: () { count.increase(); }, child: Icon(Icons.add), ); })); } } 如何创建列表通过ListView.builder创建列表import 'package:flutter/material.dart'; class MyList extends StatefulWidget { const MyList({Key? key}) : super(key: key); @override State<MyList> createState() => _MyListState(); } class _MyListState extends State<MyList> { List<String> lists = [ "hello world1", "hello world2", "hello world3", "hello world4" ]; @override Widget build(BuildContext context) { return Scaffold( body: Container( child: ListView.builder( itemBuilder: ((context, index) { return Text(lists[index]); }), itemCount: lists.length, ), )); } } 如何创建和使用自定义的数据模型类import 'package:flutter/material.dart'; class Quote { String text; String author; Quote(this.text, this.author); } class MyList extends StatefulWidget { const MyList({Key? key}) : super(key: key); @override State<MyList> createState() => _MyListState(); } class _MyListState extends State<MyList> { List<Quote> lists = [ Quote("hello1", "hsm1"), Quote("hello2", "hsm2"), Quote("hello3", "hsm3"), Quote("hello4", "hsm4") ]; @override Widget build(BuildContext context) { return Scaffold( body: Container( child: ListView.builder( itemBuilder: ((context, index) { return Text("${lists[index].text} ${lists[index].author}"); }), itemCount: lists.length, ), )); } } 如何在列表中使用卡片import 'package:flutter/material.dart'; class Quote { String text; String author; Quote(this.text, this.author); } class MyList extends StatefulWidget { const MyList({Key? key}) : super(key: key); @override State<MyList> createState() => _MyListState(); } class _MyListState extends State<MyList> { List<Quote> lists = [ Quote("hello1", "hsm1"), Quote("hello2", "hsm2"), Quote("hello3", "hsm3"), Quote("hello4", "hsm4") ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("List Card"), centerTitle: true, ), body: Container( child: ListView.builder( itemBuilder: ((context, index) { return Card( margin: EdgeInsets.fromLTRB(16, 16, 16, 0), child: Padding( padding: EdgeInsets.all(12.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(lists[index].text), SizedBox( height: 4, ), Text(lists[index].author) ], ), ), ); }), itemCount: lists.length, ), )); } } 创建表单import 'package:flutter/material.dart'; import 'package:flutter_seat_app/components/textbutton_style.dart'; class AddTaskPage extends StatelessWidget { const AddTaskPage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Padding( padding: EdgeInsets.all(10), child: AddTaskInputPage(), ); } } class AddTaskInputPage extends StatefulWidget { const AddTaskInputPage({Key? key}) : super(key: key); @override State<AddTaskInputPage> createState() => _AddTaskInputPageState(); } class _AddTaskInputPageState extends State<AddTaskInputPage> { TextEditingController nameControl = TextEditingController(); TextEditingController emailControl = TextEditingController(); bool invalidName = false; var SEX = ['主馆107-A', '主馆107-B', '主馆107-C', '主馆107-D']; var startTime = [ "08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", ]; var endTime = [ "08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "13:00", "13:30", "14:00", "14:30", ]; @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.all(3), child: Column( children: [ SizedBox( height: 10, ), DropdownButtonFormField<String>( isExpanded: true, decoration: const InputDecoration( border: OutlineInputBorder(), labelText: '房间号'), // 设置默认值 value: '主馆107-A', // 选择回调 onChanged: (String? newPosition) { setState(() {}); }, // 传入可选的数组 items: SEX.map((String sex) { return DropdownMenuItem(value: sex, child: Text(sex)); }).toList(), ), SizedBox( height: 10, ), TextField( controller: nameControl, decoration: InputDecoration( border: OutlineInputBorder(), labelText: "座位号", errorText: invalidName ? "Value Can\'t Be Empty" : null), ), SizedBox( height: 10, ), TextField( controller: emailControl, decoration: InputDecoration( border: OutlineInputBorder(), labelText: "邮箱", errorText: invalidName ? "Value Can\'t Be Empty" : null), ), SizedBox( height: 10, ), DropdownButtonFormField<String>( isExpanded: true, decoration: const InputDecoration( border: OutlineInputBorder(), labelText: '开始时间'), // 设置默认值 value: '08:00', // 选择回调 onChanged: (String? newPosition) { setState(() {}); }, // 传入可选的数组 items: startTime.map((String sex) { return DropdownMenuItem(value: sex, child: Text(sex)); }).toList(), ), SizedBox( height: 10, ), DropdownButtonFormField<String>( isExpanded: true, decoration: const InputDecoration( border: OutlineInputBorder(), labelText: '结束时间'), // 设置默认值 value: '12:00', // 选择回调 onChanged: (String? newPosition) { setState(() {}); }, // 传入可选的数组 items: endTime.map((String sex) { return DropdownMenuItem(value: sex, child: Text(sex)); }).toList(), ), SizedBox( height: 10, ), SizedBox( height: 30, ), TextButton( style: ButtonStyle(backgroundColor: createTextBtnBgColor_blue()), onPressed: () {}, child: Container( height: 50, child: Center( child: Text( " 添加任务 ", style: TextStyle( color: Colors.white, fontSize: 25, fontWeight: FontWeight.normal), ), ))), ], ), ); } } 使用HTTP请求postRequestFunction(account, password) async { ///创建Dio Dio dio = new Dio(); ///发送 FormData: FormData formData = FormData.fromMap({"user": account, "passwd": password}); String url = "http://127.0.0.1:5000/api_login_form"; ///发起 post 请求 如这里的注册用户信息 Response response = await dio.post(url, data: formData); var result = response.data.toString(); var data = jsonDecode(response.toString()); print(data['success']); if (data['success'] == 200) { // value.setLoginState(true); value.loginSuccess(); print("登陆成功"); print(Provider.of<AppState>(context, listen: false).isLogin); Navigator.pushNamed(context, "/index"); } else { value.loginClean(); ; } }如何创建登录页面import 'dart:convert'; // import 'dart:html'; import 'package:flutter/material.dart'; import 'package:flutter_seat_app/components/textbutton_style.dart'; import 'package:flutter_seat_app/my_providers/provider.dart'; import 'package:provider/provider.dart'; import 'package:dio/dio.dart'; class LoginPage extends StatefulWidget { const LoginPage({Key? key}) : super(key: key); @override State<LoginPage> createState() => _LoginPageState(); } class _LoginPageState extends State<LoginPage> { TextEditingController accountControl = TextEditingController(); TextEditingController passwordControl = TextEditingController(); @override Widget build(BuildContext context) { return Consumer<AppState>(builder: ((context, value, child) { postRequestFunction(account, password) async { ///创建Dio Dio dio = new Dio(); ///发送 FormData: FormData formData = FormData.fromMap({"user": account, "passwd": password}); String url = "http://127.0.0.1:5000/api_login_form"; ///发起 post 请求 如这里的注册用户信息 Response response = await dio.post(url, data: formData); var result = response.data.toString(); var data = jsonDecode(response.toString()); print(data['success']); if (data['success'] == 200) { // value.setLoginState(true); value.loginSuccess(); print("登陆成功"); print(Provider.of<AppState>(context, listen: false).isLogin); Navigator.pushNamed(context, "/index"); } else { value.loginClean(); ; } } return Scaffold( appBar: AppBar( title: Text("预约助手"), centerTitle: true, automaticallyImplyLeading: false, ), body: Padding( padding: EdgeInsets.all(15), child: Column( children: [ Center( child: Text( '登陆', style: TextStyle(fontSize: 35, fontWeight: FontWeight.normal), ), ), SizedBox( height: 20, ), TextField( controller: accountControl, decoration: InputDecoration( border: OutlineInputBorder(), labelText: "账号", // errorText: invalidName ? "Value Can\'t Be Empty" : null ), ), SizedBox( height: 40, ), TextField( controller: passwordControl, decoration: InputDecoration( border: OutlineInputBorder(), labelText: "密码", // errorText: invalidName ? "Value Can\'t Be Empty" : null ), ), SizedBox( height: 40, ), Center( child: TextButton( onPressed: () { var account = accountControl.text; var password = passwordControl.text; postRequestFunction(account, password); // print(result.toString()); print(Provider.of<AppState>(context, listen: false) .isLogin); if (Provider.of<AppState>(context, listen: false) .isLogin) { Navigator.pushNamed(context, '/index'); } }, child: Text( " 点击登陆 ", style: TextStyle( color: Colors.white, fontSize: 35, fontWeight: FontWeight.normal), ), style: ButtonStyle( backgroundColor: createTextBtnBgColor_blue()), ), ) ], ), )); })); } } 底部导航栏import 'package:flutter/material.dart'; // import 'components/seat_button.dart'; // import 'components/textbutton_style.dart'; import 'package:flutter_seat_app/pages/add_task_page.dart'; import 'package:flutter_seat_app/pages/init_page.dart'; import 'pages/person_page.dart'; import 'pages/home_page.dart'; // import 'package:shared_preferences/shared_preferences.dart'; import 'pages/login_page.dart'; // import 'providers/provider.dart'; import 'my_providers/provider.dart'; import 'package:provider/provider.dart'; /*入口函数*/ void main() { // SharedPreferences.setMockInitialValues({}); runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { bool isLogin = false; // App初始化函数 @override void initState() { super.initState(); print("init App..."); // return Text(""); } @override Widget build(BuildContext context) { return MultiProvider( providers: [ ChangeNotifierProvider(create: (_) => AppState()), ChangeNotifierProvider(create: (_) => TaskListProvider()) ], child: MaterialApp( title: '超星预约助手', theme: ThemeData( primaryColor: Colors.blue, ), home: LoginPage(), initialRoute: "/init", routes: { '/init': (context) => InitPage(), "/index": (context) => IndexPage(), "/login": (context) => LoginPage(), "/person": (context) => PersonPage() }, )); } } // class IndexPage extends StatefulWidget { @override State<StatefulWidget> createState() { return _IndexState(); } } class _IndexState extends State<IndexPage> { @override void initState() { super.initState(); print("init index"); } final List<BottomNavigationBarItem> bottomNavItems = [ BottomNavigationBarItem( backgroundColor: Colors.blue, icon: Icon(Icons.home), label: "首页", ), BottomNavigationBarItem( backgroundColor: Colors.blue, icon: Icon(Icons.add), label: "添加预约", ), BottomNavigationBarItem( backgroundColor: Colors.blue, icon: Icon(Icons.person), label: "个人中心", ), ]; int currentIndex = 0; final pages = [HomePage(), AddTaskPage(), PersonPage()]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("预约助手"), centerTitle: true, automaticallyImplyLeading: false, ), bottomNavigationBar: BottomNavigationBar( items: bottomNavItems, currentIndex: currentIndex, type: BottomNavigationBarType.fixed, onTap: (index) { _changePage(index); }, ), body: pages[currentIndex], ); } /*切换页面*/ void _changePage(int index) { /*如果点击的导航项不是当前项 切换 */ if (index != currentIndex) { setState(() { currentIndex = index; }); } } } [progress value="70" color="bg-info"]真棒！[/progress]