如何在 Flutter 中实现具有渐变背景的圆形 AppBar？

Question

我想实现一个具有圆形底部半径和渐变背景的 AppBar。 另外，我需要使用底部属性在 AppBar 中放置一些其他内容，例如卡片。 这是我的代码：

import 'package:flutter/material.dart';

void main() => runApp(const Toddly());

class Toddly extends StatelessWidget {
  const Toddly({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Toddly',
      home: Scaffold(
        appBar: AppBar(
          leading: GestureDetector(
            onTap: () {},
            child: Container(
              margin: const EdgeInsets.only(left: 10),
              padding: const EdgeInsets.all(2),
              decoration: const BoxDecoration(
                color: Color.fromARGB(255, 158, 77, 130),
                shape: BoxShape.circle,
              ),
              child: const CircleAvatar(
                backgroundImage: AssetImage('assets/images/profilePicture.png'),
              ),
            ),
          ),
          title: const Text(
            'Julia',
            style: TextStyle(
              fontFamily: 'Nunito',
            ),
          ),
          centerTitle: true,
          actions: [
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.notifications_outlined),
            ),
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.menu),
            ),
          ],
          bottom: PreferredSize(
            preferredSize: const Size.fromHeight(150.0),
            child: Container(
              height: 100,
              width: 100,
              color: Colors.white,
              alignment: Alignment.center,
              child: const Text('Some content'),
            ),
          ),
          flexibleSpace: Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  Color(0xFF72326a),
                  Color(0xFF321c53),
                ],
              ),
            ),
          ),
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              bottom: Radius.circular(30.0),
            ),
          ),
        ),
        backgroundColor: const Color(0xFFfef1ee),
      ),
    );
  }
}

我使用 shape 属性来实现圆底 AppBar。 我使用flexibleSpace做了渐变背景。 而且，我使用底部在 AppBar 下添加了我的其他内容。

但是，当我运行上述所有代码时。 圆底 appBar 不工作。 图像源而且，如果我删除它正在显示的灵活空间，但我失去了我的渐变。 图片来源

请帮我弄清楚，是否可以在不创建自定义 AppBars 的情况下做到这一点，因为我看到了几种方法。 谢谢

Answer 1

您只需将角半径添加到渐变容器以及附加更新的代码即可。

 import 'package:flutter/material.dart'; void main() => runApp(const Toddly()); class Toddly extends StatelessWidget { const Toddly({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Toddly', home: Scaffold( appBar: AppBar( leading: GestureDetector( onTap: () {}, child: Container( margin: const EdgeInsets.only(left: 10), padding: const EdgeInsets.all(2), decoration: const BoxDecoration( color: Color.fromARGB(255, 158, 77, 130), shape: BoxShape.circle, ), child: const CircleAvatar( backgroundImage: AssetImage('assets/images/profilePicture.png'), ), ), ), title: const Text( 'Julia', style: TextStyle( fontFamily: 'Nunito', ), ), centerTitle: true, actions: [ IconButton( onPressed: () {}, icon: const Icon(Icons.notifications_outlined), ), IconButton( onPressed: () {}, icon: const Icon(Icons.menu), ), ], bottom: PreferredSize( preferredSize: const Size.fromHeight(150.0), child: Container( height: 100, width: 100, color: Colors.white, alignment: Alignment.center, child: const Text('Some content'), ), ), flexibleSpace: Container( decoration: const BoxDecoration( borderRadius: BorderRadius.vertical( bottom: Radius.circular(30.0), ), gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ Color(0xFF72326a), Color(0xFF321c53), ], ), ), ), shape: const RoundedRectangleBorder( borderRadius: BorderRadius.vertical( bottom: Radius.circular(30.0), ), ), ), backgroundColor: const Color(0xFFfef1ee), ), ); } }