文章目录1. Flutter开发环境配置2. 第一个Demo3. 第一个bug3.1 No Directionality widget found1. Flutter开发环境配置注意初学者可参照Flutter中文官网慢慢摸索这里总结如下1、下载最新版的Android Studio在AS的plugin市场中安装最新的flutter和dart插件。关于AS和Java等相关环境变量的配置自行搜索吧。2、去Git官网安装最新的git并添加到环境变量。否则第5条中的部分命令会失效。3、去Flutter官网下载最新的Flutter SDK下载完成后直接解压并将解压后的文件存放到自己的开发目录。例如我将其存放在D:\ProgramFiles\Flutter目录中。注意需要将flutter的bin目录添加到环境变量中见上图。4、Flutter SDK内置Dart SDK故无须额外配置Dart开发环境。5、打开git的GUI或者在AS的Terminal中运行以下命令以便检测配置工作是否正确完成/* flutter --version dart --version flutter doctor */6、至此Flutter配置工作结束可用AS新建Flutter项目开始编码了要选择New Flutter Project哦。但是打开AS第一次新建Flutter项目时会要求选择Flutter SDK所在目录在AS界面中选择flutter的存放路径即可。如2. 第一个Demo用AS新建一个Flutter项目系统会生成默认Demo。注意Flutter项目名只能是lower_case_with_underscrores即只能是小写和下划线。项目结构如下图lib/main.dart是程序入口类似AS项目的MainActivity。flutter的项目代码存放在lib目录中类似AS项目的app/src/main目录。系统默认的main.dart的代码如下已删除默认注释importpackage:flutter/material.dart;voidmain(){runApp(constMyApp());//runApp()是系统函数}classMyAppextendsStatelessWidget{constMyApp({super.key});// This widget is the root of your application.overrideWidgetbuild(BuildContextcontext){// MaterialApp()也是系统函数有DirectionalityreturnMaterialApp(title:Flutter Demo,theme:ThemeData(colorScheme:.fromSeed(seedColor:Colors.deepPurple),),// 将home实例替换为自己的Demo否则会产生第一个bughome:constMyHomePage(title:Flutter Demo Home Page),);}}classMyHomePageextendsStatefulWidget{constMyHomePage({super.key,requiredthis.title});finalStringtitle;overrideStateMyHomePagecreateState()_MyHomePageState();}class_MyHomePageStateextendsStateMyHomePage{int _counter0;void_incrementCounter(){setState((){_counter;});}overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(backgroundColor:Theme.of(context).colorScheme.inversePrimary,title:Text(widget.title),),body:Center(child:Column(mainAxisAlignment:.center,children:[constText(You have pushed the button this many times:),Text($_counter,style:Theme.of(context).textTheme.headlineMedium,),],),),floatingActionButton:FloatingActionButton(onPressed:_incrementCounter,tooltip:Increment,child:constIcon(Icons.add),),);}}新建AS模拟器或连接真机即可运行该Demo效果图如下右上角的debug是调试标志因为MaterialApp(xxx)函数的默认属性this.debugShowCheckedModeBanner true,手动修改该属性为false就没有debug标志了。3. 第一个bug3.1 No Directionality widget found接下来新建自己的demo如新建ContainerPage.dart:importpackage:flutter/material.dart;classContainerPageextendsStatelessWidget{constContainerPage({super.key});/// 上层调用必须有Directionality否则报错No Directionality widget found.overrideWidgetbuild(BuildContextcontext){// Scaffold无DirectionalityreturnScaffold(appBar:AppBar(title:constText(Container)),body:Container(margin:constEdgeInsets.only(top:50.0,left:120.0),constraints:constBoxConstraints.tightFor(width:200.0,height:200.0,),decoration:constBoxDecoration(gradient:RadialGradient(colors:[Colors.red,Colors.orange],center:Alignment.topLeft,radius:.98,),boxShadow:[BoxShadow(color:Colors.black54,offset:Offset(2.0,2.0),blurRadius:4.0,),],),transform:Matrix4.rotationZ(.2),// 卡片倾斜变换alignment:Alignment.center,child:constText(520,style:TextStyle(color:Colors.white,fontSize:40.0),),),);}}该Demo直接return Scaffold而Scaffold没有Directionality在main.dart中调用时需注意若按下述方式调用会报错No Directionality widget found.importpackage:flutter/material.dart;importpackage:flutter_xiangzhihong/ContainerPage.dart;voidmain(){runApp(constContainerPage());}IDE报错信息真机运行页面报错信息正确的调用方式是 importpackage:flutter/material.dart;importpackage:flutter_xiangzhihong/ContainerPage.dart;voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:Flutter Demo,theme:ThemeData(colorScheme:.fromSeed(seedColor:Colors.deepPurple),),// 替换原MyHomePage实例因为MaterialApp有Directionalityhome:constContainerPage(),);}}正常的运行结果参考文献[1] 向治洪.Flutter跨平台开发实战[M].北京:清华大学出版社2024关注我Accrual