Question 75476 in Flutter Question posted in
The official Flutter documentation can be found here.

How to remove the whitespace between my two horizontal list views? – Flutter

Currently running into an issue where I have two containers which are horizontal listviews, within the containers i’m building out these cards which are the "recipes"

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:newapp/views/widgets/cookBookWidgets/shoe_page.dart';
import '../widgets/cookBookWidgets/cookBook_appbar.dart';
import '../widgets/cookBookWidgets/cookBook_searchBar.dart';

class CookbookPage extends StatefulWidget {
  const CookbookPage({Key? key}) : super(key: key);

  @override
  State<CookbookPage> createState() => _CookbookPageState();
}

class CardItem {
  final String urlImage;
  final String title;
  final String subtitle;

  const CardItem({
    required this.urlImage,
    required this.title,
    required this.subtitle,
  });
}

class _CookbookPageState extends State<CookbookPage> {
  List<CardItem> recipeItems = [
    CardItem(
      urlImage:
          'https://th.bing.com/th/id/OIP.p-tq9C_7CHoV2EKOQx4OmAHaHa?w=218&h=218&c=7&r=0&o=5&dpr=2&pid=1.7',
      title: 'Chicken Alfredo',
      subtitle: 'Servings',
    ),
    CardItem(
      urlImage:
          'https://th.bing.com/th/id/OIP.p-tq9C_7CHoV2EKOQx4OmAHaHa?w=218&h=218&c=7&r=0&o=5&dpr=2&pid=1.7',
      title: 'Cajun Chicken Alfredo',
      subtitle: 'Servings',
    ),
    CardItem(
      urlImage:
          'https://th.bing.com/th/id/OIP.p-tq9C_7CHoV2EKOQx4OmAHaHa?w=218&h=218&c=7&r=0&o=5&dpr=2&pid=1.7',
      title: 'Chipotle Chicken Tacos',
      subtitle: 'Servings',
    ),
    CardItem(
      urlImage:
          'https://th.bing.com/th/id/OIP.p-tq9C_7CHoV2EKOQx4OmAHaHa?w=218&h=218&c=7&r=0&o=5&dpr=2&pid=1.7',
      title: 'Classic Italian Tiramisu ',
      subtitle: 'Servings',
    ),
  ];

  List<CardItem> secondItems = [
    CardItem(
      urlImage:
          'https://th.bing.com/th/id/OIP.p-tq9C_7CHoV2EKOQx4OmAHaHa?w=218&h=218&c=7&r=0&o=5&dpr=2&pid=1.7',
      title: 'Second Item',
      subtitle: 'Subtitle for Second Item',
    ),
    CardItem(
      urlImage:
          'https://th.bing.com/th/id/OIP.p-tq9C_7CHoV2EKOQx4OmAHaHa?w=218&h=218&c=7&r=0&o=5&dpr=2&pid=1.7',
      title: 'Second Item',
      subtitle: 'Subtitle for Second Item',
    ),
    CardItem(
      urlImage:
          'https://th.bing.com/th/id/OIP.p-tq9C_7CHoV2EKOQx4OmAHaHa?w=218&h=218&c=7&r=0&o=5&dpr=2&pid=1.7',
      title: 'Second Item',
      subtitle: 'Subtitle for Second Item',
    ),
    CardItem(
      urlImage:
          'https://th.bing.com/th/id/OIP.p-tq9C_7CHoV2EKOQx4OmAHaHa?w=218&h=218&c=7&r=0&o=5&dpr=2&pid=1.7',
      title: 'Second Item',
      subtitle: 'Subtitle for Second Item',
    ),
    CardItem(
      urlImage:
          'https://th.bing.com/th/id/OIP.p-tq9C_7CHoV2EKOQx4OmAHaHa?w=218&h=218&c=7&r=0&o=5&dpr=2&pid=1.7',
      title: 'Second Item',
      subtitle: 'Subtitle for Second Item',
    ),
    // add more CardItems as needed
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: cookBookAppBar(),
      body: Column(
        children: <Widget>[
          SearchBar(),
          SizedBox(height: 10.0),
          buildSectionTitle(title: 'Your Recipes'),
          Expanded(
            child: buildContainer(recipeItems: recipeItems),
          ),
          buildSectionTitle(title: 'Recently Created'),
          Expanded(
            child: buildContainer(recipeItems: secondItems),
          ),
        ],
      ),
    );
  }

  Widget buildSectionTitle({required String title}) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            title,
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
          OutlinedButton(
            onPressed: () {
              // Add your button logic here
            },
            child: Text(
              'See All',
              style: TextStyle(color: Colors.green, fontSize: 15),
            ),
            style: OutlinedButton.styleFrom(
              side: BorderSide.none,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(4)),
            ).copyWith(
              splashFactory: NoSplash.splashFactory,
            ),
          ),
        ],
      ),
    );
  }

  Widget buildContainer({required List<CardItem> recipeItems}) {
    return Padding(
      padding: EdgeInsets.fromLTRB(16.0, 0, 16.0, 0.0),
      child: ListView.separated(
        scrollDirection: Axis.horizontal,
        itemCount: recipeItems.length,
        separatorBuilder: (context, _) => SizedBox(width: 10),
        itemBuilder: (context, index) => buildCard(item: recipeItems[index]),
      ),
    );
  }

  Widget buildCard({
    required CardItem item,
  }) =>
      SizedBox(
        width: 200,
        child: Column(
          children: [
            AspectRatio(
              aspectRatio: 4 / 3,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Material(
                  child: Ink.image(
                    image: NetworkImage(item.urlImage),
                    fit: BoxFit.cover,
                    child: InkWell(
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => ShoePage(
                                  urlImage: item.urlImage, title: item.title)),
                        );
                      },
                    ),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 5),
            Container(
              child: Text(
                item.title,
                style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
              ),
            ),
            // Text(
            //   item.subtitle,
            //   style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
            // )
          ],
        ),
      );
}

Issue

I wrapped the Sizedbox in a container and set it to black to see where the issue is.

enter image description here

I’m not sure whats going on within the SizedBox because there’s no padding being added to the bottom

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0 
      @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: cookBookAppBar(),
      body: Column(
        children: <Widget>[
          SearchBar(),
          SizedBox(height: 10.0),
          buildSectionTitle(title: 'Your Recipes'),
          Expanded(
            child: buildContainer(recipeItems: recipeItems),
          ),
          buildSectionTitle(title: 'Recently Created'),
          Container(
            height: 340,
            child: buildContainer(recipeItems: secondItems),
          ),
        ],
      ),
    );
  }

    needed to wrap my listview into a container so I could set constraints on the height, beware that the text could overflow if not dealt with properly. enter image description here


  2. 0

    You wrapped your widgets in Expanded. So they expand 🙂

    When you put an Expanded widget in a Column, you tell it to take all the available space.

    EDIT:

    @override
Widget build(BuildContext context) {
  return SingleChildScrollView(
    child: Column(
      children: <Widget>[
        SearchBar(),
        SizedBox(height: 10.0),
        buildSectionTitle(title: 'Your Recipes'),
        buildContainer(recipeItems: recipeItems),
        buildSectionTitle(title: 'Recently Created'),
        buildContainer(recipeItems: secondItems),
      ],
    ),
  );
}
    Login or Signup to reply.
  3. 0

    you should use expanded() as last widget in your columns

    Columns(
    children:[
    Expanded(
    child: buildContainer(recipeItems: recipeItems),
    ),
    buildSectionTitle(title: ‘Recently Created’),
    Expanded(
    child: buildContainer(recipeItems: secondItems),
    ),
    Expanded(child: Container())

    ])

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search