Flutter 01 目录结构入门

一、Flutter目录结构：

二、Flutter入口文件、入口方法：

 三、Flutter Demo：

demo1：

import 'package:flutter/material.dart';

//MaterialApp 和 Scaffold两个组件装饰App
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: const Center(
        child: Text(
          "我是一个文本",
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 40.0,
// color: Colors.yellow,
            color: Color.fromRGBO(244, 233, 121, 0.5),
          ),
        ),
      ),
    ),
  ));
}

Flutter把内容单独抽离成一个组件：

在Flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget 前期我们都继承StatelessWidget。后期讲StatefulWidget的使用。

StatelessWidget 是无状态组件，状态不可变的widget；

StatefulWidget 是有状态组件，持有的状态可能在widget生命周期改变。

demo2：

import 'package:flutter/material.dart';

import 'package:flutter/material.dart';

//MaterialApp 和 Scaffold两个组件装饰App
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body:const HomeWidget(),
    ),
  ));
}

/// 抽离组件
class HomeWidget extends StatelessWidget{
  const HomeWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        "我是一个文本",
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 40.0,
// color: Colors.yellow,
          color: Color.fromRGBO(244, 233, 121, 0.5),
        ),
      ),
    );
  }

}