Flutter 目录结构，入口文件，自定义组件，常用组件使用概述总结

Flutter 基础入门

目录结构介绍，入口，自定义Widget，Center组件，Text组件，MaterialApp组件，Scaffold组件

目录结构介绍

文件夹	作用
android	android平台相关的代码
ios	ios 平台相关代码
lib	flutter 相关代码，我们主要编写的代码就在这个文件夹
test	用于存放测试代码
pubspec.yaml	配置文件，一般存放一些第三方库的依赖。

Flutter入口文件

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

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

其中的 main 方法是 dart 的入口方法。runApp 方法是 flutter 的入口方法。 MyApp 是自定义的一个组件.

一个最基础的案例展示

import 'package:flutter/material.dart';

void main(){
  runApp(
    Center(
      child: Text(
        'flutter 基础项目',
        textDirection: TextDirection.ltr
        ), // Text
    )
  );
}

然后模拟器屏幕最中间出现一串白色的文字，“flutter 基础项目”

自定义组件

自定义组件，实质上就是自定义一个类，不断的给每个类新增所需要的参数

// HomeCOntent 组件
class HomeCOntent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(
        'Flutter 基础项目',
        textDirection: TextDirection.ltr,
        style: TextStyle(
            color: Colors.indigo,
            fontSize: 30
          ),
        ), // Text
    );
  }
}

案例展示效果：

Center组件，Text组件，MaterialApp组件，Scaffold组件

一些常用的flutter内置的相关组件，主要使用的方式就是配置构造方法的参数使用，建议借助IDE编辑器，自动补全来编写，因为对于新手来说太多太杂，记不住

// 自定义组件
class myApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("大喵课堂"),  // 顶部导航栏
        ),
        body: HomeCOntent(),  // 中间主题内容
      ),
      theme: ThemeData(
          primarySwatch: Colors.pink  // 粉色系主题
      )
    );
  }
}

全部案例代码

最终展示的案例效果和入口文件代码

import 'package:flutter/material.dart';

void main(){
  runApp(
    myApp()
  );
}

// 自定义组件
class myApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("大喵课堂"),  // 顶部导航栏
        ),
        body: HomeCOntent(),  // 中间主题内容
      ),
      theme: ThemeData(
          primarySwatch: Colors.pink  // 粉色系主题
      )
    );
  }
  
}

// HomeCOntent 组件
class HomeCOntent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(
        'Flutter 基础项目',
        textDirection: TextDirection.ltr,
        style: TextStyle(
            color: Colors.indigo,
            fontSize: 30
          ),
        ), // Text
    );
  }
}

最终案例效果：