Flutter工程解析(如何运行写初始化一个Dart文件)

简介: 解析 — Flutter工程解析(如何运行写初始化一个Dart文件) 这是一节小白必看的解析哦~,如果你了解过一点Flutter的写法可以跳过这节.
+关注继续查看

解析 — Flutter工程解析(如何运行写初始化一个Dart文件)

这是一节小白必看的解析哦~,如果你了解过一点Flutter的写法可以跳过这节.
主要是不写这节,后面讲的内容小白不知道如何下手
在这里插入图片描述

让我们来看看工程结构:在这里插入图片描述

文件或目录说明
.dart_tool记录了一些dart工具库所在的位置和信息
.ideaandroid studio 是基于idea开发的,.idea 记录了项目的一些文件的变更记录
androidAndroid项目文件夹
iosiOS项目文件夹
liblib文件夹内存放我们的dart语言代码
test用于存放我们的测试代码
.gitignoregit忽略配置文件
.metadataIDE 用来记录某个 Flutter 项目属性的的隐藏文件
.packagespub 工具需要使用的,包含 package 依赖的 yaml 格式的文件
flutter_app.iml工程文件的本地路径配置
pubspec.lock当前项目依赖所生成的文件
pubspec.yaml当前项目的一些配置文件,包括依赖的第三方库、图片资源文件等
README.mdREADEME文件

其中images是我们后来自己创建的,用来存放本地图片的文件夹

而web文件夹则是Flutter2.0版本支持的web模块.

重点来了 — 如何初始化一个dart文件

1.首先在lib文件夹下创建一个dart文件:在这里插入图片描述

2.初始化文件

这个文件刚刚创建好是空的

现在让我们来初始化一下它:

1.初始化main方法,每个运行的工程都需要有一个初始化的方法

void main() {
  runApp(MyApp()); //MyApp() 是自己写的类
}

2.初始StatelessWidget

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(), //自己写的类
    );
  }
}

3.初始StatefulWidget (从这里开始就是普通的dart文件初始化,上面那些是在初始化Main文件中需要写的)

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    throw UnimplementedError();
  }
}

4.初始化State

class MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

5.进一步初始化:

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyHomePageState();
//  或者
//   @override
//   State<StatefulWidget> createState(){
//     return MyHomePageState();
//   }
}

class MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      
    );
  }
}

这样一个dart文件就初始化完成了,这里看不懂没有关系,咱们先学会怎样去写,在进行深入学习~

欢迎留言纠正 ~

相关文章
|
15小时前
|
开发者
Flutter笔记:build方法、构建上下文BuildContext解析
本文主要介绍Flutter中的build方法和构建上下文对象。
10 2
Flutter笔记:build方法、构建上下文BuildContext解析
|
7月前
|
Android开发
android和Flutter的混合工程Demo
Flutter和Android混合工程的启动逻辑与纯Flutter应用程序的启动逻辑略有不同。在混合工程中,您需要在Android项目中添加一些额外的代码来启动Flutter引擎并加载Flutter代码。以下是整个app的启动逻辑的详细解释
android和Flutter的混合工程Demo
|
7月前
|
Android开发 iOS开发
android和flutter的混合工程启动逻辑
Flutter混合工程是指将Flutter代码集成到现有原生Android或iOS应用程序中的过程。在这种情况下,您需要在原生应用程序中添加一些代码来启动Flutter引擎并加载Flutter代码。以下是Flutter混合工程启动逻辑的详细说明
android和flutter的混合工程启动逻辑
|
10月前
|
JSON Dart JavaScript
Flutter(二十)——JSON解析
Flutter(二十)——JSON解析
225 4
Flutter(二十)——JSON解析
|
10月前
|
Dart JavaScript Java
Flutter(二)——解析main.dart源码
Flutter(二)——解析main.dart源码
165 0
Flutter(二)——解析main.dart源码
|
11月前
|
缓存 Java 开发工具
Flutter— 第一次运行Flutter工程时的Bug总结
Flutter— 第一次运行Flutter工程时的Bug总结
 Flutter— 第一次运行Flutter工程时的Bug总结
|
11月前
|
Dart 开发工具 Android开发
1.第一节 - Flutter教程之AndroidStudio配置Flutter工程(并运行第一个项目)
Flutter之AndroidStudio配置Flutter工程并运行第一个项目
1.第一节 - Flutter教程之AndroidStudio配置Flutter工程(并运行第一个项目)
|
JSON Dart 数据格式
Flutter Json自动解析之FlutterJsonBeanFactory
Flutter Json自动解析之FlutterJsonBeanFactory
408 0
Flutter Json自动解析之FlutterJsonBeanFactory
Flutter Widget源码解析及实战(二)
Flutter Widget源码解析及实战(二)
127 0
Flutter Widget源码解析及实战(二)
|
缓存 Android开发
Flutter Widget源码解析及实战(一)
Flutter Widget源码解析及实战(一)
258 0
Flutter Widget源码解析及实战(一)
热门文章
最新文章
相关产品
云迁移中心
推荐文章
更多