How To fixed container on Top While scrolling in Flutter - flutter

Question

I want to fix my first container on Top when my card crossed on scrolling
And This is my code:
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new SizedBox(height: 25.0,),
new Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Text("Top Fix",style: TextStyle(fontSize: 20.0)),
new SizedBox(width: 30.0,),
new CircleAvatar(
backgroundColor: Colors.white,
radius: 25.0,
child: Text("A"),
),
],
),
color: Colors.orange,
),
new Container(
height: 200.0,
width: double.infinity,
child: Container(
margin: EdgeInsets.only(top: 40.0),
child: Text(
"Welcome To \n Flutter",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
),
decoration: BoxDecoration(
borderRadius: new BorderRadius.only(
bottomLeft: new Radius.circular(50.0),
bottomRight: new Radius.circular(50.0),
),
color: Colors.orange),
),
new Container(
margin: EdgeInsets.only(left: 10.0, right: 10.0),
transform: Matrix4.translationValues(0.0, -40.0, 0.0),
child: new Card(
clipBehavior: Clip.antiAlias,
color: Colors.orange[300],
child: Row(
children: [
new Container(
margin: EdgeInsets.all(5.0),
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 25.0,
child: Text("A"),
),
),
new Container(
child: Column(
children: [
new Text(
"Hello Every One This is Flutter Tutorial",
style: TextStyle(color: Colors.white),
),
new Container(
child: Row(
children: [
new FlatButton(
onPressed: () {},
textColor: Colors.white,
child: Text("Button 1")),
new FlatButton(
onPressed: () {},
textColor: Colors.white,
child: Text("Button 1")),
],
)),
],
)),
],
),
elevation: 2.0,
),
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 1"),
),
),
new SizedBox(
height: 40,
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 2"),
),
),
new SizedBox(
height: 40,
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 3"),
),
),
],
),
// ),
);
I want to fix my first container and also change my color orange to green.

Answer 1

You can use stack like this:
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final double heightOfFirstContainer = 100.0;
#override
Widget build(BuildContext context) {
return SafeArea(
child: Stack(
children: [
Scaffold(
backgroundColor: Colors.green,
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: heightOfFirstContainer,
),
new Container(
height: 200.0,
width: double.infinity,
child: Container(
margin: EdgeInsets.only(top: 40.0),
child: Text(
"Welcome To \n Flutter",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
),
decoration: BoxDecoration(
borderRadius: new BorderRadius.only(
bottomLeft: new Radius.circular(50.0),
bottomRight: new Radius.circular(50.0),
),
color: Colors.orange),
),
new Container(
margin: EdgeInsets.only(left: 10.0, right: 10.0),
transform: Matrix4.translationValues(0.0, -40.0, 0.0),
child: new Card(
clipBehavior: Clip.antiAlias,
color: Colors.orange[300],
child: Row(
children: [
new Container(
margin: EdgeInsets.all(5.0),
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 25.0,
child: Text("A"),
),
),
new Container(
child: Column(
children: [
new Text(
"Hello Every One This is Flutter Tutorial",
style: TextStyle(color: Colors.white),
),
new Container(
child: Row(
children: [
new FlatButton(
onPressed: () {},
textColor: Colors.white,
child: Text("Button 1")),
new FlatButton(
onPressed: () {},
textColor: Colors.white,
child: Text("Button 1")),
],
)),
],
)),
],
),
elevation: 2.0,
),
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 1"),
),
),
new SizedBox(
height: 40,
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 2"),
),
),
new SizedBox(
height: 40,
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 3"),
),
),
],
),
// ),
),
),
Positioned(
child: new Container(
height: heightOfFirstContainer,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Text("Top Fix", style: TextStyle(fontSize: 20.0)),
new SizedBox(
width: 30.0,
),
new CircleAvatar(
backgroundColor: Colors.white,
radius: 25.0,
child: Text("A"),
),
],
),
color: Colors.orange,
),
),
],
),
);
}
}