1 Flutter目录结构介绍

1.1 创建项目

flutter create flutterdemo

1.2 目录结构

1.3 结构说明

1、android、ios、linux、macos、web、windows文件夹：都是对应平台相关代码

2、lib文件夹：ﬂutter相关代码，我们编写的代码就在这个文件夹

3、test文件夹：用于存放测试代码

4、pubspec.yaml：配置文件，一般存放一些第三方库的依赖。

5、analysis_options.yaml文件：分析dart语法的文件，老项目升级成新项目有警告信息的话可以删掉此文件

2 Flutter入口文件、入口方法

2.1 说明

每一个ﬂutter项目的lib目录里面都有一个main.dart这个文件就是ﬂutter的入口文件
main.dart里面的

2.2 示例

void main(){
    runApp(MyApp());
}
//也可以简写
void main()=>runApp(MyApp());

其中的main方法是dart的入口方法。

扫描二维码关注公众号，回复： 14734768 查看本文章

runApp方法是ﬂutter的入口方法。

MyApp是自定义的一个组件

3 Flutter第一个Demo Center组件的使用

demo1

//代码块
import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "我是一个文本",
      textDirection: TextDirection.ltr,
    ),
  ));
}

使用可选参数添加相关属性信息

import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "我是一个文本",
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontSize: 40.0,
// color: Colors.yellow,
        color: Color.fromRGBO(244, 233, 121, 0.5),
      ),
    ),
  ));
}

demo3

import 'package:flutter/material.dart';

//MaterialApp 和 Scaﬀold两个组件装饰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),
          ),
        ),
      ),
    ),
  ));
}

demo4

import 'package:flutter/material.dart';

import 'package:flutter/material.dart';

//MaterialApp 和 Scaﬀold两个组件装饰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),
        ),
      ),
    );
  }

}

4 MaterialApp 和 Scaﬀold两个组件装饰App

4.1 MaterialApp

MaterialApp是一个方便的Widget，它封装了应用程序实现Material Design所需要的一些Widget。一般作为顶层widget使用。

常用的属性：

home (主页)

title (标题)

color (颜色)

theme (主题)

routes (路由)

...

4.2 Scaﬀold

Scaﬀold是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet 的API。

Scaﬀold 有下面几个主要属性：

appBar - 显示在界面顶部的一个 AppBar。

body - 当前界面所显示的主要内容 Widget。

drawer - 抽屉菜单控件。

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

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

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

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

示例

import 'package:flutter/material.dart';

import 'package:flutter/material.dart';

//MaterialApp 和 Scaﬀold两个组件装饰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),
        ),
      ),
    );
  }

}

【Flutter入门到进阶】Flutter基础篇---第一个Flutter应用