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

1 Flutter目录结构介绍

1.1 创建项目

        flutter create flutterdemo

1.2 目录结构

1.3 结构说明

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

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

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

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

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

2 Flutter入口文件、入口方法

2.1 说明

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

2.2 示例

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

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

runApp方法是flutter的入口方法。

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 和 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),
          ),
        ),
      ),
    ),
  ));
}

demo4

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),
        ),
      ),
    );
  }
 
}

4 MaterialApp 和 Scaffold两个组件装饰App

4.1 MaterialApp

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

        常用的属性：

                home  (主页)

                title  (标题)

                color  (颜色)

                theme  (主题)

                routes  (路由)

                ...

4.2 Scaffold

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

        Scaffold 有下面几个主要属性：

                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 和 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),
        ),
      ),
    );
  }
 
}