1. 目录

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

2. 入口文件/方法

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

main.dart 里面

void main() {
  runApp(const MyApp());
}

自定义组件

• 在flutter中自定义组件是一个类，这个类需要继承StatelessWidget/StatefulWidget。
• StatelessWidget是无状态组件，状态不可变的widget
• StatefulWidget是有状态组件，持有的状态可能在widget生命周期改变。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // return const HomeContent();
    return const Center(
        child: Text(
          "我在屏幕",
          textDirection: TextDirection.ltr,
          style: TextStyle(
          fontSize: 40.0,
          color: Color.fromRGBO(0, 0, 0, 1)),
    ));
  }
}

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

3. Widget

3.1 MaterialApp/Scaffold

3.2 MaterialApp

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

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // return const HomeContent();
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('flutter Demo')),
        body: const HomeContent()
      ),
      theme: ThemeData(
        primarySwatch: Colors.orange
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({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(0, 0, 0, 1)),
    ));
  }
}

常用的属性：

• home(主页)
• title(标题)
• color(颜色)
• theme（主题）
• routes(路由) ...

3.3 Scaffold

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

3.4 Scaffold有下面几个主要属性

• appBar: 显示在页面顶部的一个AppBar
• body: 当前界面所显示的主要内容Widget
• drawer: 抽屉菜单空间

3.5 Container/Text组件

4.1 Container容器 (opens new window)

import 'package:flutter/material.dart';


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('flutter demo')
        ),
        body: const HomeContent()
      )
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

   @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: const Text('xxxx'),
        width: 300.0,
        height: 300.0,
        decoration: BoxDecoration(
          color: Colors.blue,
          border: Border.all(
            color: Colors.red,
            width: 2.0
          ),
          borderRadius: const BorderRadius.all(
            Radius.circular(8.0)
          )
        )
      )
    );
  } 
}

4.2 Text 组件 (opens new window)

Text(
  'Hello, $_name! How are you?',
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  style: const TextStyle(fontWeight: FontWeight.bold),
)

使用Text.rich构造函数，Text小部件可以显示具有不同样式TextSpan的段落。下面的示例显示“Hello beautiful world”，每个单词都有不同的样式。

const Text.rich(
  TextSpan(
    text: 'Hello', // default text style
    children: <TextSpan>[
      TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
      TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)

RichText小部件显示使用多种不同样式的文本

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: const <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)