flutter - How to create a custom AppBar widget?

Question

I'm new to flutter. I'm trying to create a custom appbar widget and importing the widget in pages.

But I was unable to create the widget.

import 'package:flutter/material.dart';
 
 class AppBar extends StatelessWidget{
  @override
  Widget build(BuildContext context){
return AppBar(
  title: Text('Ordering'),
  actions: <Widget>[
    IconButton(
      onPressed: _incrementCounter,
      icon: Icon(Icons.add),
    ),
    BadgeIconButton(
      itemCount: _counter,
      badgeColor: Color.fromRGBO(37, 134, 16, 1.0),
      badgeTextColor: Colors.white,
      icon: Icon(Icons.shopping_cart, size: 30.0,),
      onPressed: () {}
    ),
  ],
);

} }'

标签： flutterdartappbarflutter-widget

Answer 1

import 'package:flutter/material.dart';

class CustomAppBar extends StatefulWidget implements PreferredSizeWidget {
    CustomAppBar({Key key}) : preferredSize = Size.fromHeight(kToolbarHeight), super(key: key);

    @override
    final Size preferredSize; // default is 56.0

    @override
    _CustomAppBarState createState() => _CustomAppBarState();
}

class _CustomAppBarState extends State<CustomAppBar>{

    @override
    Widget build(BuildContext context) {
        return AppBar( title: Text("Sample App Bar") );
    }
}

希望这会有所帮助