Flutter從0開始的創(chuàng)建

1. Flutter項目的創(chuàng)建方式

1. 通過命令行創(chuàng)建 flutter creat jc_flutter

• 注意:在創(chuàng)建的時候，不能有特殊的字符和大寫字母，如果想駝峰命名就使用_

2.通過編譯工具創(chuàng)建，

2.目錄結(jié)構認知

image

1.冷啟動： 從零開始啟動
2.Hot Reload 熱重載 -->主要是執(zhí)行 bulid方法
3.Hot Restart 熱重啟 -->重新運行整個APP

image

3.從零開始

從上面的目錄結(jié)構中，我們知道main函數(shù)是一個入口函數(shù)
我們刪除系統(tǒng)自帶的代碼，如何從0??開始呢?

1.首先導入 import 'package:flutter/material.dart'; 庫
這個是material庫是Google公司推行的一套設計風格
其實還有一道設計風格庫 import 'package:flutter/cupertino.dart';

2.寫入 main函數(shù)，其中 runApp()是material風格中啟動APP的函數(shù)，需要傳入一個參數(shù) widget組件,在Flutter中，所有的界面都是有widget組成

3.假設我們 傳入一個Text組件,有一個必傳參數(shù)data,可選的命名參數(shù)
注意:在是使用可選命名參數(shù)的時候，必須把參數(shù)名帶上

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:有狀態(tài)變化的widget,就是有data數(shù)據(jù)發(fā)生變化的
2. StatelessWidget :沒有數(shù)據(jù)變化的，一般就是靜態(tài)頁面布局種使用

image

//函數(shù)入口
main(){

  //調(diào)用 runApp， 需要一個widget組件
  //程序啟動 會調(diào)用這個函數(shù)
  runApp(
      MyApp()
  );
}

//創(chuàng)建一個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
        ),
      ),
    );

  }
}