Adjust size Container? - flutter

Question

I'm new to flutter, I'm trying to change size of a container, but it not change even i change height:150 and width=150, I just want green screen show about 1/5 screen, but i really don't know how to fix this. I don't understand why, when changing the height and width of the Container, nothing will change
here is code
return Container(
decoration: new BoxDecoration(color: Colors.white),
child: new MaterialApp(
title: "Sample",
debugShowCheckedModeBanner: false,
home: Container(
height: 150.0,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30),
)),
child: Stack(
children: [
Positioned(
top: 150,
left: 0,
child: Row(
children: <Widget>[
SvgPicture.asset(
user,
width: 60,
height: 60,
),
SizedBox(
width: 10,
),
Text(
"Welcome back, $username",
style: TextStyle(
fontSize: 20,
fontFamily: fontRegular,
decoration: TextDecoration.none,
color: Colors.white,
),
),
SizedBox(
width: 10,
),
Container(
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
border: Border.all(width: 1.5, color: Colors.black),
color: Color.fromRGBO(230, 230, 230, 1),
borderRadius: BorderRadius.circular(30),
),
child: Row(
children: [
SvgPicture.asset(
"assert\\dollar.svg",
height: 25,
width: 25,
),
Text(
'$coinValue',
style: TextStyle(
fontSize: 18,
color: Colors.black,
decoration: TextDecoration.none),
),
],
),
),
SizedBox(
width: 13,
),
],
),
),
],
),
),
),
);
}
Here is result
i just want something like this

Answer 1

hope this helps you:
Add Scaffold around the inner container (the one with height 150 )... and you don't need the stack and positioned(the content won't show up if you don't remove them):
MaterialApp(
title: "Sample",
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Container(
height: 150.0,
decoration: ...

Answer 2

Rewrite your code as below:
home: Scaffold(
body: SafeArea(
child: Container(
height: 150.0,
decoration: BoxDecoration(
color: Colors.green,
),
child: Row(
children: <Widget>[
SizedBox(
width: 10,
),
Text(
"Welcome back",
style: TextStyle(
fontSize: 20,
//fontFamily: fontRegular,
decoration: TextDecoration.none,
color: Colors.white,
),
),
SizedBox(
width: 10,
),
Container(
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
border: Border.all(width: 1.5, color: Colors.black),
color: Color.fromRGBO(230, 230, 230, 1),
borderRadius: BorderRadius.circular(30),
),
child: Row(
children: [
Text(
'dsfsfsf',
style: TextStyle(
fontSize: 18,
color: Colors.black,
decoration: TextDecoration.none),
),
],
),
),
SizedBox(
width: 13,
),
],
),
),
),
),

Answer 3

You have the Stack widget inside your Container widget. That is why it is taking the whole screen. Try removing the Stack widget.
return Container(
decoration: new BoxDecoration(color: Colors.white),
child: new MaterialApp(
title: "Sample",
debugShowCheckedModeBanner: false,
home: Container(
height: 150.0,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30),
)),
child: Positioned(
top: 150,
left: 0,
child: Row(
children: <Widget>[
SvgPicture.asset(
user,
width: 60,
height: 60,
),
SizedBox(
width: 10,
),
Text(
"Welcome back, $username",
style: TextStyle(
fontSize: 20,
fontFamily: fontRegular,
decoration: TextDecoration.none,
color: Colors.white,
),
),
SizedBox(
width: 10,
),
Container(
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
border: Border.all(width: 1.5, color: Colors.black),
color: Color.fromRGBO(230, 230, 230, 1),
borderRadius: BorderRadius.circular(30),
),
child: Row(
children: [
SvgPicture.asset(
"assert\\dollar.svg",
height: 25,
width: 25,
),
Text(
'$coinValue',
style: TextStyle(
fontSize: 18,
color: Colors.black,
decoration: TextDecoration.none),
),
],
),
),
SizedBox(
width: 13,
),
),
],
),
),
),
);

Answer 4

Do as follows
Container(
height: 150,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(20),
bottomLeft: Radius.circular(20))),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(
radius: 30.0,
backgroundImage: NetworkImage('https://via.placeholder.com/150'),
backgroundColor: Colors.transparent,
),
Expanded(child:Text("Hey there, Welcome back LQK!")),
Container(
width:100,
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
border: Border.all(width: 1.5, color: Colors.black),
color: Color.fromRGBO(230, 230, 230, 1),
borderRadius: BorderRadius.circular(30),
),
child: Row(
children: [
Icon(Icons.search) //put your desired icon here
],
),
),
],
)