How to create an AppBar with a bottom coloured border in Flutter?

在Flutter中创建一个带有底部彩色边框的AppBar，可以使用AppBar组件，并通过其bottom属性添加一个PreferredSizeWidget。通常，可以使用PreferredSize组件来包裹一个BottomAppBar，并设置边框的样式。以下是具体的步骤和示例代码：

步骤：

1. 创建一个新的Flutter项目： 使用Flutter命令行工具或者IDE来创建一个新的Flutter项目。

2. 编辑AppBar： 在主屏幕的Scaffold中添加一个AppBar。

3. 设置bottom属性： 为AppBar的bottom属性指定一个PreferredSize组件，这个组件包裹了Border和Container，用以定义底部边框。

4. 设置底部边框颜色和高度： 在Container内部使用BoxDecoration来定义边框的颜色和高度。

示例代码：

dart
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: Text('带底部彩色边框的AppBar'),
          bottom: PreferredSize(
              preferredSize: Size.fromHeight(4.0), // 设置边框的高度
              child: Container(
                color: Colors.orange, // 设置边框的颜色
                height: 4.0,
              )),
        ),
        body: Center(
          child: Text('主屏幕内容'),
        ),
      ),
    );
  }
}

解释：

• PreferredSize：这是用来给AppBar的bottom属性提供一个自定义的高度和子组件的包装器。
• Container：这是实际定义底部边框的组件，通过设定其height和color属性来设定边框的高度和颜色。

这样，当你运行上述应用时，你会在AppBar底部看到一个橙色的底部边框。这种方法不仅适用于底部边框，也可以通过修改Container的decoration属性来创建更复杂的边框样式。