I need to reduce ListView.separated items width, place them in the center of screen, but they width is same as screen size, how i can change it?

this is what i got

this is what i need

this is my code

Scaffold(           
                  body:
                  ListView.separated(
                  itemCount: 2,
                  itemBuilder: (BuildContext context,int index){
                    return Container(
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Color.fromARGB(100, 141, 166, 255),
                          width: 2
                          
                        ),
                        borderRadius: BorderRadius.circular(10)
                      ),
                      width: 50,
                      height: 80,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text('Test txt', style: TextStyle(fontSize: 40),)
                        ],
                      ),
                    );
                  },
                  separatorBuilder: (BuildContext context, int index){
                    return Container(
                      height: 14,
                    );
                  }
              ),
            );

CodePudding user response：

Add your ListView widget inside Container or Padding Widget and set padding or just set padding to Listview like padding: EdgeInsets.all(16.0) try below code hope its help to you

  Container(
      padding: EdgeInsets.all(16.0),
      child: ListView.separated(
          itemCount: 2,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              decoration: BoxDecoration(
                  border: Border.all(
                      color: Color.fromARGB(100, 141, 166, 255), width: 2),
                  borderRadius: BorderRadius.circular(10)),
              width: 50,
              height: 80,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Test txt',
                    style: TextStyle(fontSize: 40),
                  )
                ],
              ),
            );
          },
          separatorBuilder: (BuildContext context, int index) {
            return Container(
              height: 14,
            );
          }),
    ),

Your Result Screen->

CodePudding user response：

ListView.separated(
   padding: const EdgeInsets.all(16.0)
   ....