flutter实现透明appbar（一）

前言

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

实现

  Widget build(BuildContext context) {
    return  Scaffold(
      body: Stack(
        children: [_homePage(), _appBar()],
      ),
    );
  }
1
2
3
4
5
6
7

_appbar

Widget _appBar() {
    //AppBar
    return 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,
                    )),
              ],
            )));
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67