Home > Enterprise >  Flutter Material() in ListView builder decoration
Flutter Material() in ListView builder decoration

Time:09-27

How to change Material() border color i have this code, inkWell is a child of sliable widget that also returned in ListView.builder

child:InkWell(
              onTap: (){
                
              },
              child: Material(
                color: Colors.blueAccent,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(18),
                  ),
                child: buildListTile(item),
              )
        ));

i need something like

enter image description here

also i can use only Material() class because my ListView.builder return me Sliable widget from Sliable library, and this is only widget i found that must work fine with desing that i wont

CodePudding user response:

You can change the border of the Material widget using the side property inside your RoundedRectangleBorder.

I also typically put the InkWell inside the Material widget too.

Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Material(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(18),
                          side: const BorderSide(color: Colors.blueAccent),
                        ),
                        child: InkWell(
                          borderRadius: BorderRadius.circular(18),
                          onTap: () {},
                          child: const ListTile(title: Text('item')),
                        ),
                      ),
                    ),

enter image description here

CodePudding user response:

You can use Card also try below code hope its help to you I have tried same as your image.

  Card(
          shape: RoundedRectangleBorder(
            side: BorderSide(color: Colors.green.shade300),
            borderRadius: BorderRadius.circular(15.0),
          ),
          child: Column(
            children: [
              ListTile(
                leading: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('OK'),
                    Text('OK'),
                  ],
                ),
                title: Text('name'),
              ),
            ],
          ),
        ),

Your result screen-> enter image description here

  • Related