Appbar 在颤动中从四面八方进行模糊和填充

Question

如何在flutter中创建如下图的Appbar？

Answer 1

您可以使用PreferredSizeWidget 创建自定义应用栏小部件。使用BackdropFilter可以获得模糊效果。

代码示例

class BlurredAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      // To add some elevation shadow
      decoration: BoxDecoration(boxShadow: [
        BoxShadow(
          blurRadius: 4,
          color: Colors.black.withOpacity(0.1),
          offset: Offset(0, 2),
        ),
      ]),
      child: ClipRRect(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child: Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              color: Colors.white.withOpacity(0.1),
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                BackButton(),
                Text('Dashboard', style: TextStyle(fontWeight: FontWeight.bold)),
                IconButton(
                  onPressed: () {},
                  icon: Icon(Icons.menu),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(56.0);
}

然后只需像普通的AppBar 一样在您的Scaffold 中添加这个小部件：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      // So your background will go behind your AppBar like in your screenshot
      extendBodyBehindAppBar: true,
      appBar: BlurredAppBar(),
    );
  }
}

截图

Try the full test code on DartPad

Answer 2

1. 创建 .dart 文件。

2. 将此代码复制粘贴到 .dart 文件中。

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:match/constant.dart';

class BlurredAppBar extends StatelessWidget implements PreferredSizeWidget {

  const BlurredAppBar({
    Key key,
    @required
    this.title,
    this.left_icon,
    this.right_icon,
    this.colorCode,
    this.left_press,
    this.right_press,

  }) : super (key: key);

  final String title;
  final IconData left_icon;
  final IconData right_icon;
  final Color colorCode;
  final Function left_press;
  final Function right_press;

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Container(
      //padding: EdgeInsets.only(top: 10),
       height: 70,
      margin: EdgeInsets.symmetric(horizontal: 10, vertical: 8),
      width:size.width * 0.10 ,

      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        color: Colors.transparent,
        boxShadow: [
          BoxShadow(
            color: COLOR_BLUE.withOpacity(0.3),
            spreadRadius: 1,
            blurRadius: 2,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(16),
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
          
          child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(16),
               color: COLOR_BLUE.withOpacity(0.1),

            ),
            child:  Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                //BackButton(),
                IconButton(
                  onPressed: left_press,
                  icon: Icon(left_icon,color: colorCode, ),
                ),
                Text(title, style: TextStyle(fontWeight: FontWeight.w400,color: colorCode, fontSize: 18)),
                IconButton(
                  onPressed: right_press,
                  icon: Icon(right_icon,color: colorCode, ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(70.0);
}

1. 然后像普通的AppBar 一样在您的Scaffold 中添加这个小部件：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      // Change background color 
      extendBodyBehindAppBar: true,
      appBar: BlurredAppBar(
        title: "Requests",
         //comment if you wan to hide icons of left or right 
        left_icon: Icons.autorenew_rounded,
        right_icon: Icons.delete,
        colorCode: Colors.blue,
        left_press: (){},
        right_press: (){},
      ),
    );
  }
}