Flutter - How to get Rounded border when scrolling listview?

Question

I'm having listview with chips in bottom of the Column.

In first image from starting in listview its in circular shape but in the end its shows as rectangle.

When scrolling the listview Chip 1 day is overflow.(Second Image).

I want both side bottom need to circular, How to achieve? Thanks in Advance.

My Code

Container(
                padding: EdgeInsets.only(
                  top: 16.0,
                ),
                width: MediaQuery.of(context).size.width,
                height: 100,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12.0),
                    color: Colors.white),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(""),
                    Container(
                      height: 35,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.only(
                              bottomLeft: Radius.circular(12.0),
                              bottomRight: Radius.circular(12.0)),
                          color:
                              Theme.of(context).chipTheme.backgroundColor),
                      child: ListView(
                        scrollDirection: Axis.horizontal,
                        children: getChoiceChips(),
                      ),
                    )
                  ],
                ),
              )

Chip Function

getChoiceChips() {
List<Widget> choiceChipList = [];
List<String> choiceString = [
  '1 Day',
  '1 Week',
  '1 Month',
  '3 Months',
  '1 Year'
];
for (String choice in choiceString) {
  choiceChipList.add(Padding(
    padding: const EdgeInsets.only(left: 2.0, right: 2.0),
    child: ChoiceChip(
      label: Text(choice),
      selected: choice == selectedChoice,
      onSelected: (newSelectedChoice) {
        setState(() {
          print(selectedChoice);
          print(newSelectedChoice);
          selectedChoice = choice;


          print(selectedChoice);
          print(choice);
        });
      },
    ),
  ));
}
return choiceChipList;
}

Abion47 · Accepted Answer · 2020-02-14 07:35:29Z

19

The BoxDecoration in the Container will only show the rounded corners as a visual feature. If you want to actually clip the contents to within those rounded corners with no overflow, you want to surround the container in a ClipRRect.

ClipRRect(
  borderRadius: BorderRadius.circular(12.0),
  child: Container(
    padding: EdgeInsets.only(top: 16.0),
    width: MediaQuery.of(context).size.width,
    height: 100,
    decoration: BoxDecoration(color: Colors.white),
    child: Column(
      ...
    ),
  ),
),

answered Feb 14, 2020 at 7:35

Abion47

25.4k6 gold badges75 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Flutter - How to get Rounded border when scrolling listview?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related