Adjust size Container?

user_14490784 0
Viewed 857

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

Result

i just want something like this

result

dart flutter
4 Answers

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: ...
user_130583710

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,
            ),
          ),
        ],
      ),
    ),
  ),
);
user_128044000

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,
            ),
          ],
        ),
      ),
    ),
  ),
user_81475080

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 
            ],
          ),
        ),
    ],
  )
user_80237010
Related