return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(150),
child: AppBar(
elevation: 0,
leading: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.black,
onPressed: () {},
),
actions: [
TextButton(
onPressed: () {},
child: Text(
'Skip',
style: GoogleFonts.halant(
textStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
),
),
],
backgroundColor: Colors.amber,
title: Text(
'Sign up',
style: GoogleFonts.halant(
textStyle: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w500,
color: Colors.black
),
),
),
centerTitle: true,
CodePudding user response:
you don't need to use AppBar
widget to do this, you need to make it manually by assigning a Container
to the body
of the Scaffold
and assign a backGroundImage
to the Container
. then give the Container
a Column
as a child and using a Row
widget on the top and give it the three children ( the skip text - sign up text - the arrow ) you get the AppBar
and for white Container
give it a BorderRadius.only
CodePudding user response:
This is a full example of what you want:
Scaffold(
body: Stack(
fit: StackFit.expand,
children: [
ColorFiltered(
colorFilter: ColorFilter.mode(Colors.amber, BlendMode.color),
child: Image.asset(
'assets/images/test.jpeg',
fit: BoxFit.cover,
),
),
Column(
children: [
AppBar(
elevation: 0,
leading: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.black,
onPressed: () {},
),
actions: [
TextButton(
onPressed: () {},
child: Text(
'Skip',
style: TextStyle(color: Colors.black),
),
),
],
backgroundColor: Colors.transparent,
title: Text(
'Sign up',
style: TextStyle(color: Colors.black),
),
centerTitle: true,
),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(60)),
color: Colors.white,
),
)),
],
)
],
),
),