Maybe this code is not the best way but it was easiest to make UI like this
Scaffold(
backgroundColor: Colors.grey[200],
appBar: CustomAppBar(
backgroundColor: Colors.grey[500],
title: '',
),
body: Column(
children: [
Container(
decoration: BoxDecoration(
color: Colors.grey[500],
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(56),
),
),
width: MediaQuery.of(context).size.width,
height: 200,
),
Container(
color: Colors.grey[500],
child: Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: const BorderRadius.only(
topRight: Radius.circular(70),
),
),
width: MediaQuery.of(context).size.width,
height: 200,
),
)
],
),
),
[![enter image description here][1]][1]
[1]: https://i.sstatic.net/M6ox5mDp.png
You can use the below code to make a rounded button with a gradient color.
Container(
width: 130.0,
height: 43.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
gradient: LinearGradient(
// Where the linear gradient begins and ends
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// Add one stop for each color. Stops should increase from 0 to 1
stops: [0.1, 0.9],
colors: [
// Colors are easy thanks to Flutter's Colors class.
Color(0xff1d83ab),
Color(0xff0cbab8),
],
),
),
child: FlatButton(
child: Text(
'Sign In',
style: TextStyle(
fontSize: 16.0,
fontFamily: 'Righteous',
fontWeight: FontWeight.w600,
),
),
textColor: Colors.white,
color: Colors.transparent,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
onPressed: () {
},
),
);
