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;
}

Pathogenic

Answer 1

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(
      ...
    ),
  ),
),

Koger