Flutter的第一个Demo和Bug-编程实验室

文章目录

1. Flutter开发环境配置
2. 第一个Demo
3. 第一个bug
- 3.1 No Directionality widget found

1. 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的代码如下（已删除默认注释）：

import'package: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;@overrideState<MyHomePage>createState()=>_MyHomePageState();}class_MyHomePageStateextendsState<MyHomePage>{int _counter=0;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. 第一个bug

3.1 No Directionality widget found

接下来，新建自己的demo，如新建ContainerPage.dart:

import'package: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.

import'package:flutter/material.dart';import'package:flutter_xiangzhihong/ContainerPage.dart';voidmain(){runApp(constContainerPage());}

IDE报错信息：

真机运行页面报错信息：

正确的调用方式是：

import'package:flutter/material.dart';import'package: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(),);}}