Posted By
Bajarangi soft ,
Posted On 23-09-2020
I built something similar with a CustomScrollView and SliverPersistenHeader, to get the Curved Effect your header can have a maxExtent and minExtent. When not scrolled the header height will show the Curved otherwise when you start scrolling it will also shrink to a set height.
You Can Add Curved Appbar COde:
Scaffold(
backgroundColor: Colors.lime[400],
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.only(
top: 60.0, left: 30.0, right: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'BajarangiSoft',
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontWeight: FontWeight.w700,
),
),
],
),
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
),
),
],
),
),
import 'package:flutter/material.dart'; void main()=> runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: "My App", home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { String _colorName = 'No'; Color _color = Colors.black; @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( backgroundColor: Colors.lime[400], body: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Container( padding: EdgeInsets.only( top: 60.0, left: 30.0, right: 30.0, bottom: 30.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( 'BajarangiSoft', style: TextStyle( color: Colors.white, fontSize: 40.0, fontWeight: FontWeight.w700, ), ), ], ), ), Expanded( child: Container( padding: EdgeInsets.symmetric(horizontal: 20.0), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.only( topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0), ), ), ), ), ], ), ), ); } }