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

To create an AppBar with a colored bottom border in Flutter, you can use the AppBar widget and set its bottom property to a PreferredSizeWidget. Typically, you can use the PreferredSize widget to wrap a Container and define the border style.

Steps:

1. Create a new Flutter project: Use the Flutter command-line tool or IDE to create a new Flutter project.
2. Edit the AppBar: Add an AppBar to the main screen's Scaffold.
3. Set the bottom property: Set the bottom property of the AppBar to a PreferredSize widget that wraps a Container to define the bottom border.
4. Set the bottom border color and height: Inside the Container, use BoxDecoration to define the border color and height.

Example Code:

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 with Colored Bottom Border'),
          bottom: PreferredSize(
              preferredSize: Size.fromHeight(4.0), // Set the border height
              child: Container(
                color: Colors.orange, // Set the border color
                height: 4.0,
              )),
        ),
        body: Center(
          child: Text('Main screen content'),
        ),
      ),
    );
  }
}

Explanation:

• PreferredSize: This is used to provide a custom height and child widget for the AppBar's bottom property.
• Container: This is the component that defines the bottom border, with its height and color properties set to define the border's height and color.

This way, when you run the application, you will observe an orange bottom border at the bottom of the AppBar. This approach can be extended to create more complex border styles by modifying the Container's decoration property.