CODEWITHSUNDEEP
flutter
rameez khan
rameez khan

Reputation: 359

Flutter height of list widget is not reducing

I am trying to reduce height and width of container of a widget but its not reducing.

Code

class MyWidget extends StatelessWidget {
  List datesData = [
    
      '09:00 am - 10:00 am',
      '10:00 am - 11:00 am',
      '11:00 am - 12:00 am',
      '12:00 am - 01:00 am',
      '01:00 am - 02:00 am',
      '02:00 am - 03:00 am',
      '03:00 am - 04:00 am',
      '04:00 am - 05:00 am'
    
  ];

  List<Widget> textWidgetList = List<Widget>();

  
  @override
  Widget build(BuildContext context) {
    List<Widget> textWidgetList = List<Widget>(); 
    for (int i = 0; i < 7; i++) {
      textWidgetList.add(
        Container(
          height: 100,
          width: 200,
          color: Colors.grey,
          child: Center(
            child: Text(datesData[i].toString()),
            )
        ),
      );
    }

    return   GridView(
              padding: EdgeInsets.all(0),
              shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 1,
                crossAxisSpacing: 1,
              ),
              children: textWidgetList,
            
          );
  }
}

I need to show grid view like this

enter image description here

its showing like this

enter image description here

I try to give height and width to the container but it's not working.

Upvotes: 0

Views: 67

Answers (2)

Lee3
Lee3

Reputation: 3067

The width of the children will be determined by the number of columns (crossAxisCount) in the GridView, as well as the crossAxisSpacing and Padding. Use childAspectRatio to achieve the desired height.

GridView(
  padding: EdgeInsets.all(0),
  shrinkWrap: true,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 1,
    crossAxisSpacing: 1,
    // use ratio to adjust height
    childAspectRatio: 3,
  ),
  children: textWidgetList,
),

Upvotes: 1

Shirsh Shukla
Shirsh Shukla

Reputation: 5973

Try this, its because grid items size, no need to set container height for this reason.

 @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;

      final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
      final double itemWidth = size.width / 2;
 

    List<Widget> textWidgetList = List<Widget>(); 
    for (int i = 0; i < 7; i++) {
      textWidgetList.add(
        Container(
          height: 100,
          width: 200,
          color: Colors.grey,
          child: Center(
            child: Text(datesData[i].toString()),
            )
        ),
      );
    }

    return   GridView(
              padding: EdgeInsets.all(0),
              shrinkWrap: true,
             childAspectRatio: (itemWidth / itemHeight),

              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 1,
                crossAxisSpacing: 1,
              ),
              children: textWidgetList,
            
          );
  }
}

Upvotes: 0

Related Questions