skip to Main Content

I have a listview builder below my divider, but when i place my listview builder below the divider. it will show a big big empty space, i try to add padding but cannot push it closer to the divier. I try to change the divider height but its not pushing the divider to my listview.

any idea to make the divider and the listview builder get closer to each other ?
enter image description here

Widget myWidgetWeek() {
    final String formattedDate =
    DateFormat.yMMMMd().format(_selectedDate);
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              onPressed: _decrementDate,
              icon: Icon(Icons.arrow_left, size: 60),
            ),
            Container(
              padding: EdgeInsets.only(left: 22,top: 20),
              height: MediaQuery.of(context).size.height*5/77,
              child: Center(
                child: Text(
                  formattedDate,
                  style: TextStyle(fontSize: 20.0),
                ),
              ),
            ),
            IconButton(
              onPressed: _incrementDate,
              icon: Icon(Icons.arrow_right, size: 60),
            ),
          ],
        ),
        SizedBox(
          width: MediaQuery.of(context).size.width * 34/40,
          height: MediaQuery.of(context).size.height * 12/50,
          child: StepBarMonthlyChart(),
        ),
        if (_showFirst)
          Container(
            width: MediaQuery.of(context).size.width*5/5.7,
            padding: EdgeInsets.only(top: 10.0,left: 10),
            child: Text(
              'Steps are a useful measure of how much you're moving around, and can help you'
                  'spot changes in your activity levels',
              style: TextStyle(
              fontFamily: 'Montserrat',
              fontSize: 14,
              color: Colors.black,
              fontWeight: FontWeight.w400),
              ),
            ),
          if (_showFirst)
          Divider(
            height: MediaQuery.of(context).size.height * 3.5/50,
            color: Colors.grey,
            thickness: 2,
          ),
          if (_showFirst)
          Expanded(
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: activity.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text(activity[index]['day']),
                  subtitle: Text(activity[index]['steps']),
                );
              },
            ),
          ),
      ],
    );
  }

4

Answers


  1. In ListTile add this properties

    ListTile (
        visualDensity: VisualDensity(horizontal: 0, vertical: -4),
        contentPadding: EdgeInsets.symmetric(horizontal: 0.0, vertical: 0.0),
        dense: true,
        // add your title, leading and other properties
        ),
    

    Hope this helps

    Login or Signup to reply.
    1. Set Padding : EdgeInsets.all(0) in listview.builder, I hope this might help you to get through this
    Login or Signup to reply.
  2. This is my secret bug when I worked with ListView.
    You only need to add a zero-padding:

    ListView.builder(
      padding: EdgeInsets.zero,
      //...
    )
    

    Hope to help you!

    Login or Signup to reply.
  3. Remove the height of the Divider

    Divider(
                height: 0, // give zero height
                color: Colors.grey,
                thickness: 2,
              ),
    

    And use SizedBox or Padding to give the spacing.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search