flutter实现透明appbar（一）

本文主要是介绍flutter实现透明appbar（一），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

在项目中如何实现透明的appbar，方式一：使用stack和positioned定位功能把appbar定位到页面的最上面，实现

实现

  Widget build(BuildContext context) {return  Scaffold(body: Stack(children: [_homePage(), _appBar()],),);}

_appbar

Widget _appBar() {//AppBarreturn Positioned(top: 0,left: 0,right: 0,child: Obx(() => AppBar(// 前置图标leading: controller.flag.value? const Text(''): const Icon(ItyingIcons.xiaomi, color: Colors.white),// 前置图标宽度leadingWidth: controller.flag.value? ScreenAdapter.width(40): ScreenAdapter.width(140),title: InkWell(child: AnimatedContainer(width: controller.flag.value? ScreenAdapter.width(800): ScreenAdapter.width(620),height: ScreenAdapter.height(96),duration: const Duration(seconds: 1),decoration: BoxDecoration(color: const Color.fromARGB(230, 252, 243, 236),borderRadius: BorderRadius.circular(30)),child: Row(children: [Padding(padding: EdgeInsets.fromLTRB(ScreenAdapter.width(34), 0,ScreenAdapter.width(10), 0),child: const Icon(Icons.search),),Text('手机',style: TextStyle(color: Colors.black54,fontSize: ScreenAdapter.fontSize(32)),)]),),onTap: () {Get.toNamed('/search');},),centerTitle: true,backgroundColor:controller.flag.value ? Colors.white : Colors.transparent,// 去除appbar阴影效果elevation: 0,// 右侧按钮actions: [IconButton(onPressed: () {},icon: Icon(Icons.qr_code,color:controller.flag.value ? Colors.black87 : Colors.white,)),IconButton(onPressed: () {},icon: Icon(Icons.message,color:controller.flag.value ? Colors.black87 : Colors.white,)),],)));}