002 flutter基础初始文件讲解（1）

news2025/6/4 9:21:06

在学习flutter的时候，要有“万物皆widget”的思想，这样有利于你的学习，话不多说，开始今天的学习

1.创建文件

进入trae后，按住ctrl+shift+P，输入Flutter：New Project，回车，即可得到flutter初始文件

左侧会有很多的文件夹，但是这里要注意的是，我们目前只需要注意lib文件夹里面的main.dart，这也是当前我们需要学习的地方

2.运行

当前的初始文件实际上是一个示例文件，在trae里打开终端，然后输入flutter run

那么在我这里，我选择1，最后的结果为：

这是一个简单的按下按钮，就会数字加一的程序

3.代码解释

由于主要的示例文件难度较大，因此我们先把main.dart里面的代码全部删除，从0开始，这样对大家的负担会稍微少些。

import "package:flutter/material.dart";

这里导入了一个关键的模块，这个模块的功能是引入flutter框架，用于构建用户界面

import "package:flutter/material.dart";

void main(){
  runApp(MaterialApp());
}

这里是一个熟悉的dart语法，main函数。

runApp是一个方法，是flutter框架提供的一个函数，用于启动应用程序

而MaterialApp是一个widget，它提供了Material Design风格的界面，里面有很多widget，比如Scaffold，AppBar，Text，Button等等

import "package:flutter/material.dart";

void main(){
  runApp(MaterialApp(
    home:Scaffold(),
    debugShowCheckedModeBanner: false,
  ));  
}

这里我们加入了两个东西，一个是home，表示主页面，而Scaffold是一个widget，它提供了一个基本的Material Design布局，比如AppBar，Body，FloatingActionButton等等

至于debugShowCheckedModeBanner是什么，可以看下上面那个示例图片的右上角，有一个debug的图标，而把这个设置为false，就可以将图标删除

import "package:flutter/material.dart";

void main(){
  runApp(MaterialApp(
    home:Scaffold(
      appBar:AppBar(), 
      body:Center(),
  ),
    debugShowCheckedModeBanner: false,
  )
  );
}

这里我们在home里面加入了两个，一个是appBar，另一个是body，分别对应着顶部栏和主页面内部，AppBar是一个widget，它提供了一个Material Design风格的顶部导航栏，而Center是一个widget，它提供了一个居中的布局，里面有很多widget，比如Text，Button等等

import "package:flutter/material.dart";

void main(){
  runApp(MaterialApp(
    home:Scaffold(
      appBar:AppBar(title:Text("The World")), 
      body:Center(
        child:Text("Hello World"),
      ), 
  ),
    debugShowCheckedModeBanner: false,
  )
  );
}

这里，我们加入了两句话，对于标题，直接使用title，然后记得在输入前用Text包好，对于主页面文本，则要使用child。

现在，我们可以试试效果啦！

看上去似乎有点奇怪，原来是因为字太小了，而且颜色过于单调，那么，让我们进行一些小小的修改：

import "package:flutter/material.dart";

void main(){
  runApp(MaterialApp(
    home:Scaffold(
      appBar:AppBar(title:Text("The World")), 
      body:Center(
        child:Text("Hello World",
        textDirection:TextDirection.ltr, 
        style:TextStyle(
          fontSize:40.0,
          color:Colors.purple,
          fontWeight:FontWeight.bold,
        ),
        ),
      ), 
  ),
    debugShowCheckedModeBanner: false,
  )
  );
}

这里，我们对主页面文字进行了修改，可以看见，我们加入了textDirection，这表示着文本的方向，ltr是左往右，rtl是右往左，很好理解，毕竟：l，是left的首字母，r是right的首字母

在style里面，可以设置文本的各种风格，比如这里的fontSize就是40的大小，而color则是字的颜色，fontWidght则是字体的粗细，这里的bold指的是粗的意思，那么接下来我们再看看效果~