Using Stack to align Containers in Flutter
3,258
Solution 1
I've made changes to your code to do what you are trying to achieve. Please take a look:
SingleChildScrollView(
child: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 20.0),
alignment: Alignment.topCenter,
height:250.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.elliptical(30,8),
bottomRight: Radius.elliptical(30,8),
),
color:Colors.blueAccent,
),
//child: Image.asset("assets/bgImage.jpg"),
),
Container(
//color: Colors.white,
width: 400.0,
padding: EdgeInsets.only(top: 223, left: 55, right: 55),
child: TextField(
decoration: InputDecoration(
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(vertical: 15.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
hintText: 'Search',
hintStyle: TextStyle(
fontSize: 18.0
),
prefixIcon: Icon(
Icons.search,
size: 30.0,
),
filled: true,
),
//onSubmitted :
),
),
],
),
Padding(
padding: const EdgeInsets.only(left: 20.0,right: 20.0, top: 20),
child: Card(
elevation: 6.0,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
],
),
),
),
),
]
),
),
);
Solution 2
This should work for you
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 30.0),
alignment: Alignment.topCenter,
height:250.0,
decoration: BoxDecoration(
color:Colors.blueAccent,
borderRadius: BorderRadius.only(
bottomLeft: Radius.elliptical(25, 10),
bottomRight: Radius.elliptical(25, 10),
)
),
//child: Image.asset("assets/bgImage.jpg"),
),
Positioned(
top: 200.0,
right: 0.0,
left: 0.0,
child: Container(
//color: Colors.white,
width: 400.0,
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 55.0),
child: TextField(
decoration: InputDecoration(
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(vertical: 15.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
hintText: 'Search',
hintStyle: TextStyle(
fontSize: 18.0
),
prefixIcon: Icon(
Icons.search,
size: 30.0,
),
/*suffixIcon: IconButton(
icon: Icon(
Icons.clear,
),
onPressed: _clearSearch,
),*/
filled: true,
),
//onSubmitted :
),
),
),
],
),
Padding(
padding: EdgeInsets.only(
top: 10.0,
left: 20.0,
right: 20.0,
bottom: 20.0,
),
child: Card(
elevation: 6.0,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
],
),
),
),
),
]
),
),
),
);
}
Author by
Himanshu Sharma
I am a Software Engineer, specializing in the mobile development domain and a focused computer science major currently pursuing my Bachelor. For the past 2 years, I have been developing mobile and web apps using Flutter SDK and Dart programming language. I am an open-source enthusiast and I enjoy learning new technologies. Additionally, I am an organizer of Flutter Chandigarh and Flutter India. In my spare time, I love writing Technical Articles and Mentor fellow developers at Hackathons. And I am proud that my articles have reached out to 123K+ developers and helped a lot of organizations to grow their products. If you want to talk about Flutter, Dart, Technical Writing, or anything else, feel free to drop me a message or contact me at [email protected].
Updated on December 17, 2022Comments
-
Himanshu Sharma over 1 year
I want the Search (TextFormField) bar to look like this and the background image to curve in the container:
This is the Code, I tried to Stack the Container and Search Bar together and then Align the search bar using Positioned, but couldn't do it.
Widget build(BuildContext context) { return Scaffold( body: SingleChildScrollView( child: Container( color: Colors.white, child: Column( children: <Widget>[ Stack( children: <Widget>[ Container( margin: EdgeInsets.only(bottom: 20.0), alignment: Alignment.topCenter, color:Colors.blueAccent, height:250.0, /*decoration: BoxDecoration( borderRadius: BorderRadius.only(bottomLeft: Radius.circular(15.0)) ),*/ //child: Image.asset("assets/bgImage.jpg"), ), Positioned( top: 155.0, right: 0.0, left: 0.0, child: Container( //color: Colors.white, width: 400.0, padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 55.0), child: TextField( decoration: InputDecoration( fillColor: Colors.white, contentPadding: EdgeInsets.symmetric(vertical: 15.0), enabledBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.grey), borderRadius: BorderRadius.all(Radius.circular(20.0)), ), focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.grey), borderRadius: BorderRadius.all(Radius.circular(20.0)), ), hintText: 'Search', hintStyle: TextStyle( fontSize: 18.0 ), prefixIcon: Icon( Icons.search, size: 30.0, ), /*suffixIcon: IconButton( icon: Icon( Icons.clear, ), onPressed: _clearSearch, ),*/ filled: true, ), //onSubmitted : ), ), ), ], ), Padding( padding: const EdgeInsets.only(left: 20.0,right: 20.0,), child: Card( elevation: 6.0, child: Padding( padding: const EdgeInsets.all(15.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ Padding( padding: const EdgeInsets.all(8.0), child: Column( children: <Widget>[ CircleAvatar( radius: 30.0, backgroundColor: Colors.blue, ), SizedBox(height: 5.0,), Text('Jaipur') ], ), ), Padding( padding: const EdgeInsets.all(8.0), child: Column( children: <Widget>[ CircleAvatar( radius: 30.0, backgroundColor: Colors.blue, ), SizedBox(height: 5.0,), Text('Jaipur') ], ), ), ], ), ), ), ), ] ), ), ),I tried to cover all of them in the single Stack but they stacked over each other and I couldn't arrange them one after another vertically.
-
Himanshu Sharma over 4 yearsThank you for the solution.