Flutter AppBar统一样式抽取

Posted 2022-03-02 一杯清泉

        为了便于App的管理，统一主题风格，需要统一自定义标题栏和状态栏，效果如下：

 

      

一、页面使用

void main() 
  //定义状态栏
  if (Platform.isandroid) 
    SystemUiOverlayStyle _style = const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent, //设置状态栏背景颜色
      //statusBarIconBrightness: Brightness.light, //设置图标颜色
    );
    SystemChrome.setSystemUIOverlayStyle(_style);
  
  runApp(const MyApp());


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

  @override
  Widget build(BuildContext context) 
  	//使用
    return const TitleBar(
      title: '首页',
      body: Home(),
    );
  

二、自定义AppBar

class TitleBar extends StatelessWidget 
  final String title;
  final Widget body;

  const TitleBar(Key? key, required this.title, required this.body)
      : super(key: key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      debugShowCheckedModeBanner: false, //取消debug图标
      //platform：为了实现ios的侧滑返回上一级界面添加，不需要的可以去掉
      theme: ThemeData(primaryColor: Colors.blue, platform: TargetPlatform.iOS), 
      home: MyHomePage(
        title: title,
        body: body,
      ),
    );
  


class MyHomePage extends StatefulWidget 
  final String title;
  final Widget body;

  const MyHomePage(Key? key, required this.title, required this.body)
      : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
        backgroundColor: ThemeColors.colorF2F2F2,
        appBar: AppBar(
          title: Text(
            widget.title,
            style: TextStyle(color: ThemeColors.color191919),
          ),
          centerTitle: false, //加了platform: TargetPlatform.iOS标题默认居中显示，设置false靠左显示
         // backgroundColor: ThemeColors.colorF2F2F2,
          backgroundColor: Colors.blue,
        ),
        body: widget.body);