Remove space from column

Question

So i'm trying to remove space from my column, Below is the parent part,

Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
      children: [
        // Other widget //
        Container(
          margin: EdgeInsets.only(left: 10, right: 10, top: 5, bottom: 5),
          height: widget.height ?? 325,
          child: listWebbinar(),
        ),
      ],
    );

listWebbinar is the part that i want to remove the empty spaces, here is the script

Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Flexible(
                  child: buildPageView(
                      _pageController, snapshot.data.length, snapshot.data),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    SmoothPageIndicator(
                      controller: _pageController,
                      count: snapshot.data.length,
                      effect: WormEffect(
                        activeDotColor: AppColors.primary,
                        dotWidth: 10.h,
                        dotHeight: 10.h,
                      ),
                    ),
                  ],
                ),
              ],
            );
    

buildPageView contain pagebuilder, here is the script

 Widget buildPageView(
      PageController controller, int itemlength, List<Education> education) {
    return PageView.builder(
      controller: controller,
      itemCount: itemlength,
      physics: ClampingScrollPhysics(),
      onPageChanged: (page) {
        setState(() {
          //     currentPage = page;
        });
      },
      itemBuilder: (context, index) {
        return pageContent(education[index]);
      },
    );
  }

and the last one is pageContent

 Widget pageContent(Education pageData) {
    return InkWell(
      onTap: () async {},
      child: Container(
        color: Colors.red,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AspectRatio(
              aspectRatio: 16 / 9,
              child: CachedNetworkImage(
                imageUrl: "https://via.placeholder.com/200x100",
                placeholder: (context, url) => MyLoader(),
                errorWidget: (context, url, error) => ThumnailError(),
                imageBuilder: (context, imageProvider) => Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: imageProvider,
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 5.h,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  child: Text(
                    "Title",
                    style:
                        TextStyle(fontSize: 18.sp, fontWeight: FontWeight.bold),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

from my script above here is the result. As you can see there is a gap between my slider and my slider indicator, So how can i remove the blank space there (red color)?

Answer 1

I tried the following way (don't know it fits for you give it a try):

In your _pageContent() wrap your InkWell() with a Container() and pass padding: const EdgeIntsets.only(bottom:32.0) -> this will give a little space at the bottom of your red colored container() making space for the indicators.

Demo Code:

Widget _pageContent() {
      return Padding(
        ///Padding here
        padding: const EdgeInsets.only(bottom: 32.0),
        child: InkWell(
          onTap: () => print('Inkwell tapped'),
          child: Container(
            color: Colors.red,
            child: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                AspectRatio(
                  aspectRatio: 16 / 9,
                  child: Image(
                    fit: BoxFit.fill,
                    image: NetworkImage(
                      "https://via.placeholder.com/200x100",
                    ),
                    //   imageUrl: "https://via.placeholder.com/200x100",
                    //   placeholder: (context, url) => MyLoader(),
                    //   errorWidget: (context, url, error) => ThumnailError(),
                    // imageBuilder: (context, imageProvider) => Container(
                    //   decoration: BoxDecoration(
                    //     image: DecorationImage(
                    //       image: imageProvider,
                    //       fit: BoxFit.fill,
                    //     ),
                    //   ),
                    // ),
                  ),
                ),
                SizedBox(
                  height: 5,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Expanded(
                      child: Center(
                        child: Text(
                          "Title",
                          style: TextStyle(
                              fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      );
    }

And in the _buildPageView() pass the indicators widgets list as a parameter and wrap the PageView.builder() with a Stack() and make the indicators widget lists as the children for a Row() with mainAxisAlignment: MainAxisAlignment.center.

Finally wrap your Row() with an Align() widget and give an alignment:Alignment.bottomCenter.

If you want to give a padding to the indicators then wrap the Row() with a Padding() widget with desired padding values.:

Demo Code:

Widget _buildPageView(
        PageController controller, int itemlength, List<Widget> pageIndicator) {
      return Stack(

        children: [
          PageView.builder(
            controller: controller,
            itemCount: itemlength,
            physics: ClampingScrollPhysics(),
            onPageChanged: (page) {
              setState(() {
                selectedIndex = page;
              });
            },
            itemBuilder: (context, index) {
              return _pageContent();
            },
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: pageIndicator,
              ),
            ),
          ),
        ],
      );
    }

To customize the height of the red container:

Widget build(BuildContext context){
    return Container(
      //to change the height of the page view wrap it with a container widget and
      //give it a height more than the height of the image above.
      height: 300,
      child: _buildPageView(_pageController, 4, _buildPageIndicator(4)),
    );
}

Demo Image:

Let me know if there is any confusion. Thank you.