Flutter从0开始的创建

Flutter从0开始的创建

1. Flutter项目的创建方式

1. 通过命令行创建 flutter creat jc_flutter

• 注意:在创建的时候，不能有特殊的字符和大写字母，如果想驼峰命名就使用_

2.通过编译工具创建，

2.目录结构认知

image

1.冷启动： 从零开始启动
2.Hot Reload 热重载 -->主要是执行 bulid方法
3.Hot Restart 热重启 -->重新运行整个APP

image

3.从零开始

从上面的目录结构中，我们知道main函数是一个入口函数
我们删除系统自带的代码，如何从0️⃣开始呢?

1.首先导入 import 'package:flutter/material.dart'; 库
这个是material库是Google公司推行的一套设计风格
其实还有一道设计风格库 import 'package:flutter/cupertino.dart';

2.写入 main函数，其中 runApp()是material风格中启动APP的函数，需要传入一个参数 widget组件,在Flutter中，所有的界面都是有widget组成

3.假设我们 传入一个Text组件,有一个必传参数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,
  });
}

从图中的代码中，其中，我们看到是报错，说没有指明一个布局的排列方向

image

修改

import 'package:flutter/material.dart';

main(List<String> args) {
//指明方向
  runApp(Text("Hello World", textDirection: TextDirection.ltr));
}

image

下面我们要使用 Material设计风格 和 widget更改界面
在更改之前，说明一下widget

widget (是一个抽象类) 有2种子类

1. StatefulWidget:有状态变化的widget,就是有data数据发生变化的
2. StatelessWidget :没有数据变化的，一般就是静态页面布局种使用

image

//函数入口
main(){

  //调用 runApp， 需要一个widget组件
  //程序启动 会调用这个函数
  runApp(
      MyApp()
  );
}

//创建一个MyApp 类  继承StatelessWidget 组件
class MyApp extends StatelessWidget {

  //重写build 方法
  @override
  Widget build(BuildContext context) {
   //返回一个组件
    return JCHomePage();
  }
}

// JCHomePage
class JCHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return  //Material风格
      MaterialApp(
        //隐藏右上角的dub文字
          debugShowCheckedModeBanner: false,
          // Scaffold脚手架
          home:Scaffold(
            appBar: AppBar(
              title: Text("Flutter导航"),

            ),
            body: JCHomeBody(),
          )

      );
  }

}


//JCHomeBody
class JCHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Center(
      child: Text(
        "Hello World",
        style: TextStyle(
            fontSize: 30,
            color: Colors.red
        ),
      ),
    );

  }
}