Textfl

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: Text(
          "Hello Flutter Hello Flutter Hello Flutter Hello Flutter Hello Flutter Hello Flutter Hello Flutter Hello Flutter Hello Flutter Hello Flutter Hello Flutter Hello Flutter",
          // 风格
          style: TextStyle(fontSize: 30, color: Colors.blue),
          // 对其方式
          textAlign: TextAlign.center,
          // 最大行
          maxLines: 3,
          // 超出显示
          overflow: TextOverflow.ellipsis,
        )
      ),
    );
  }
}

Icon

• Flutter 中的图标库
• 使用方式：Icon(Icons.具体名称)
• 在线预览：https://fonts.google.com/icons

Colors

• 使用方式：Colors.red 浅色 Colors.red[100]

Container

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          // 宽度/高度 自动延申到页面宽度
          width: double.infinity,
          height: double.infinity,
          margin: EdgeInsets.all(40),
          padding: EdgeInsets.only(top: 10),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black, width: 10),
            borderRadius: const BorderRadius.all(Radius.circular(20)),
            color: Colors.greenAccent
          ),
          child: const Text("Container", style: TextStyle(fontSize: 30),)
        )
    )
    );
  }
}

Card

和Container差不多，可能就是加上了圆角

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Card(
              color: Colors.cyan,
              margin: EdgeInsets.all(20),
              child: ListTile(
                leading: Icon(Icons.people_alt),
                title: Text("张三"),
                subtitle: Text("董事长"),
              ),
            )
          ],
        )
    ));
  }
}

Button

Flutter 1.22 版本新增了3个按钮，TextButton、OutlinedButton、ElevatedButton。

以前的按钮调整为统⼀的外观⽐较麻烦，因此以前经常使⽤⾃定义的按钮， ⽽新增的按钮解决了此类问题，可以⾮常⽅便的设置整体外观

外观上并没有很⼤的不同，但 TextButton、OutlinedButton、ElevatedButton 将外观属性集合为⼀个ButtonStyle，⾮常⽅便统⼀控制。