Flutter学习-5
2025-10-31 08:31:59
如何运行flutter、flutter环境目录、flutter的helloword
3352

创建Flutter项目

创建Flutter项目有两种方式：通过命令行创建 和 通过开发工具创建

1.通过命令行创建非常简单，在终端输入以下命令即可：

**注意：**Flutter的名称不要包含特殊的字符，另外不可以使用驼峰标识

flutter create learn_flutter

创建完之后使用自己喜欢的开发工具打开即可

2.直接通过Android Studio来进行创建：选择Start a new Flutter project，之后填写相关的信息即可

目录结构
.dart_tool 第三方工具
.idea /.iml   项目当前配置
android/ios 打包环境
lib 代码文件
main.dart 启动入口文件 名字不可更改
test 测试文件
.gitignore git文件忽略
.metadata flutter版本管理
.pubspec.yaml/.pubspec.lock/.packages 依赖
README.md readme文件
打开模拟器

Android Studio 打开tools菜单 → AVD Manager → 运行

命令行 

flutter devices //检测模拟器
flutter run //运行

如果卡在 Initializing gradle 原因 ： 可能正在下载gradle zip包，此文件大约100多M，如果网速慢的话，下载很慢，因此卡住。如何解决这个问题

  1. 找到\android\gradle\wrapper\gradle-wrapper.properties中的distributionUrl看gradle 版本 例如gradle-5.6.2-all.zip
  2. 去百度找到这个版本的下载包
  3. 生成一个可以下载的网址链接替换掉gradle-wrapper.properties的distributionUrl
  4. 再次运行flutter run 等待下载完成

启动方式：

  1. 冷启动 全部重新启动
  2. 热重载只重载build方法
  3. 热更新全局

开始编写hello word

清空main.dart

import 'package:flutter/material.dart';
main() {
 //1.runApp函数
 runApp(
 Center(
  child:  Text(
   "Hello Word",
   textDirection: TextDirection.ltr,
   style:TextStyle(
    fontSize:38,
    color: Colors.orange
   ),
   )
 )
   ); //传入一个 Widget Text继承于Widget
}
runApp和Widget

runApp是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的

Flutter中万物皆Widget（万物皆可盘）：在我们iOS或者Android开发中，我们的界面有很多种类的划分：应用（Application）、视图控制器（View Controller）、活动（Activity）、View（视图）、Button（按钮）等等；

但是在Flutter中，这些东西都是不同的Widget而已；

也就是我们整个应用程序中所看到的内容几乎都是Widget，甚至是内边距的设置，我们也需要使用一个叫Padding的Widget来做；

material是什么

material是Google公司推行的一套设计风格，或者叫设计语言、设计规范等；

里面有非常多的设计规范，比如颜色、文字的排版、响应动画与过度、填充等等；

在Flutter中高度集成了Material风格的Widget；

在我们的应用中，我们可以直接使用这些Widget来创建我们的应用（后面会用到很多）；

Text小部件分析：

我们可以使用Text小部件来完成文字的显示；

我们发现Text小部件继承自StatelessWidget，StatelessWidget继承自Widget；

所以我们可以将Text小部件传入到runApp函数中

属性非常多，但是我们已经学习了Dart语法，所以你会发现只有this.data属性是必须传入的。

class Text extends StatelessWidget {
 const Text(
  this.data, {
  Key key,
  this.style,
  this.strutStyle,
  this.textAlign,
  this.textDirection,
  this.locale,
  this.softWrap,
  this.overflow,
  this.textScaleFactor,
  this.maxLines,
  this.semanticsLabel,
  this.textWidthBasis,
 });
}
改进界面样式

我们在Text小部件外层包装了一个Center部件，让Text作为其child；

并且，我们给Text组件设置了一个属性：style，对应的值是TextStyle类型；

import 'package:flutter/material.dart';
main(List<String> args) {
 runApp(
  Center(
   child: Text(
    "Hello World",
    textDirection: TextDirection.ltr,
    style: TextStyle(fontSize: 36),
   ),
  )
 );
}
改进界面结构

目前我们虽然可以显示HelloWorld，但是我们发现最底部的背景是黑色，并且我们的页面并不够结构化。

正常的App页面应该有一定的结构，比如通常都会有导航栏，会有一些背景颜色等

在开发当中，我们并不需要从零去搭建这种结构化的界面，我们可以使用Material库，直接使用其中的一些封装好的组件来完成一些结构的搭建。

我们通过下面的代码来实现：

import 'package:flutter/material.dart';
main(List<String> args) {
 runApp(
  MaterialApp(
   home: Scaffold(
    appBar: AppBar(
     title: Text("CODERWHY"),
    ),
    body: Center(
     child: Text(
      "Hello World",
      textDirection: TextDirection.ltr,
      style: TextStyle(fontSize: 36),
     ),
    ),
   ),
  )
 );
}


在最外层包裹一个MaterialApp

这意味着整个应用我们都会采用MaterialApp风格的一些东西，方便我们对应用的设计，并且目前我们使用了其中两个属性；

title：这个是定义在Android系统中打开多任务切换窗口时显示的标题；

home：是该应用启动时显示的页面，我们传入了一个Scaffold翻译过来是脚手架，脚手架的作用就是搭建页面的基本结构；

所以我们给MaterialApp的home属性传入了一个Scaffold对象，作为启动显示的Widget；

Scaffold也有一些属性，比如appBar和body；

appBar是用于设计导航栏的，我们传入了一个title属性；

body是页面的内容部分，我们传入了之前已经创建好的Center中包裹的一个Text的Widget；

重构案例代码

现在我们就可以通过StatelessWidget来对我们的代码进行重构了

因为我们的整个代码都是一些数据展示，没有数据的改变，使用StatelessWidget即可；

每一个weiget就可以拆分成一个class

import 'package:flutter/material.dart';
main()=>runApp(MKAppPage());
/**
 *  widget:
 * 有状态的widget: Statefulwidget在运行过程中有一些状态(data)需要改
 * 无状态的widget:Statelesswidget.内容是确定没有状态(data)的改变
 * 
*/
class MKAppPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
    home: MKHomePage()
  );
 }
}

class MKHomePage extends StatelessWidget{
 @override
 Widget build(BuildContext context) {
   return Scaffold(
   appBar: AppBar(title: Text("第一个flutter程序")),
   body: MKContentBody(),
  );
 }
}

class MKContentBody extends StatelessWidget{
 @override
 Widget build(BuildContext context) {
  // TODO: implement build
  return Center(
     child: Text(
    "Hello Word",
    style: TextStyle(fontSize: 38, color: Colors.orange),
   ));
 }
}

有状态的Widget：实现点击更改状态，setState需要更改状态

import 'package:flutter/material.dart';
main()=>runApp(MKAppPage());
class MKAppPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
    home: MKHomePage()
  );
 }
}

class MKHomePage extends StatelessWidget{
 @override
 Widget build(BuildContext context) {
   return Scaffold(
   appBar: AppBar(title: Text("第一个flutter程序")),
   body: MKContentBody(),
  );
 }
}

class MKContentBody extends StatefulWidget{
 @override
 State<StatefulWidget> createState() {
  return MKContentBodySate();
 }
}
class MKContentBodySate extends State<MKContentBody>{
 var flag=true;
 @override
 Widget build(BuildContext context) {
  return Center(
     child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
       Checkbox(value: flag, onChanged: (value){
        setState(() {
         flag=value;
        });
       }),
       Text("同意协议",style: TextStyle(fontSize: 20),)
      ],
     ));
 }
}
最新文章