How to implement Round Shaped AppBar with Gradient Background in Flutter? - flutter

Question

I want to achieve an AppBar which has a rounded bottom radius and gradient background. Also, I need to place some other content like cards within AppBar using the bottom property.
Here is my code:
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),
),
);
}
}
I used the shape property to implement rounded bottom AppBar.
I did gradient background using flexibleSpace.
And, I used bottom to add my other content under within AppBar.
However when I run all above code. rounded bottom appBar is not working.
image source
And, if I remove flexibleSpace it is showing, but I lost my gradient.
image source
Please, help me to figure it out and is it possible to do that without creating custom AppBars since I saw several approaches.
Thanks

Answer 1

All you just need to add corner radius to gradient container as well attaching you the updated code.
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),
),
);
}
}