Using Stack to align Containers in Flutter
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') ], ), ), ], ), ), ), ), ] ), ),);
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') ], ), ), ], ), ), ), ), ] ), ), ),);}