RectangleBox In Flutter

Question

In my code, there is this CircleAvtar which I want to replace it with a big rectangular box. I am new to flutter I am finding it difficult to achieve this.

 child: Card(
          elevation: 3,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
          child: Container(
            margin: EdgeInsets.all(5),
            padding: EdgeInsets.all(5),
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(
                10,
              ),
              // border: Border.all(width: 0.5),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                    color: whiteColor,
                  ),
                  child: expertiseSearchModel.userImageURL.isEmpty
                      ? CircleAvatar(
                          radius: 35,
                          child: SvgPicture.asset(
                            'assets/images/default_user_image.svg',
                            // height: screenUtil.setSp(80),
                            // width: screenUtil.setSp(80),
                            fit: BoxFit.contain,
                          ),
                        )
                      : CircleAvatar(
                          radius: 35,
                          backgroundImage:
                              NetworkImage(expertiseSearchModel.userImageURL),
                        ),
                ),

I want it to look like this :

What are you currently getting with your code? Then, why don't you use a card instead for your container and the image should be a background for a child container using DecorationImage Widget from the BoxDecoraton class — itstheM, Sep 04 '20 at 10:52

score 0 · Answer 1 · edited Sep 04 '20 at 11:15

0

Inside your main container use the column as a child and put another container as a child and use the Image decoration property of the container to display pictures. You can change the border-radius of the child container to have those circular edges.

edited Sep 04 '20 at 11:15

Dharman

30,962
25
85
135

answered Sep 04 '20 at 11:09

Usman Akhlaq

481
1
3
9

score 0 · Accepted Answer · answered Sep 04 '20 at 11:13

If you can show us what your current code is giving the output maybe I can help you more. But As far as i understood this, you can simple use Image.Network() to show the image and remove the circular avatar

Try this, if it works if not lemme know I will edit it accordingly

Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(5)),
          color: whiteColor,
        ),
        child: expertiseSearchModel.userImageURL.isEmpty
            ? CircleAvatar(
                radius: 35,
                child: SvgPicture.asset(
                  'assets/images/default_user_image.svg',
                  // height: screenUtil.setSp(80),
                  // width: screenUtil.setSp(80),
                  fit: BoxFit.contain,
                ),
              )
            : Image.network(expertiseSearchModel.userImageURL)
      ),

Works. Thanks a lot. Can you please also tell me how can I add border-radius? — ali262883, Sep 04 '20 at 12:04
`ClipRRect( borderRadius: BorderRadius.circular(8.0), child: Image.network( subject['images']['large'], height: 150.0, width: 100.0, ), )` Please refer to [this](https://stackoverflow.com/questions/51513429/rounded-corners-image-in-flutter) question for more details And please do vote up the answer :)) Thanks — Hamza, Sep 04 '20 at 13:33

RectangleBox In Flutter

2 Answers2