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

Flutter add bottom margin to Stack

I am trying to extend Stack a little bit down to create room for "All caught up" text.

Here is my code;

  return Stack(
        children: [
          buildListView(scrollController),
          buildBackToTop(scrollController, backtoTop),
          buildBottomReached(isLastIndex),
        ],
      );

Widget buildBackToTop(ScrollController scrollController, bool backtoTop) {
  if (backtoTop) {
    return Align(
      alignment: Alignment.topCenter,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: FloatingActionButton.extended(
          onPressed: () {
            scrollController.animateTo(0,
                duration: const Duration(milliseconds: 200),
                curve: Curves.linear);
          },
          label: const Text("Back to Top"),
        ),
      ),
    );
  } else {
    return const SizedBox();
  }
}

Widget buildBottomReached(bool isLastIndex) {
  if (isLastIndex) {
    return const Align(
      alignment: Alignment.bottomCenter,
      child: Text(
        "All caught up 🎉",
        style: TextStyle(
            color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 20.00),
      ),
    );
  } else {
    return const SizedBox();
  }
}

Widget buildListView(ScrollController scrollController) {
  return ListView.builder(
      controller: scrollController,
      itemCount: 50,
      itemBuilder: (context, index) {
        return SizedBox(
          width: 20,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              width: 20,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black),
                color: Colors.grey[100],
              ),
              child: Center(
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text("Index $index"),
                  ),
                ),
              ),
            ),
          ),
        );
      },
      physics: const BouncingScrollPhysics());
}

enter image description here

When I do following,

  return Stack(
      children: [
        Padding(
          padding: const EdgeInsets.only(bottom: 30),
          child: buildListView(scrollController),
        ),
        buildBackToTop(scrollController, backtoTop),
        buildBottomReached(isLastIndex),
      ],
    );

This is desired but it adds whitespace to bottom all the time,

enter image description here
enter image description here

Is there a way to do this?

Tags:

3

Answers


  1. 0

    Based on your UI. try Column widget instead of Stack.

      return Column(
        children: [
          Expaneded(child: buildListView(scrollController)),
          buildBackToTop(scrollController, backtoTop),
          buildBottomReached(isLastIndex),
        ],
      );

    If it needs overlay, use Stack by combining listView and Text with Column.

    Wrap the widget with Positioned and add bottom.

     return Stack(
        children: [
         .....
         Positioned(
           bottom: yourValue,
           child:
    Login or Signup to reply.
  2. 0

    another valid solution for your case is to expand the Stack to the screen size, then align your widgets with the Align widget like this:

    final mq = MediaQuery.of(context);
return ConstrainedBox(
  constraints: BoxConstraints(
    maxHeight: mq.size.height,
    minHeight: mq.size.height,
    maxWidth: mq.size.width,
    minWidth: mq.size.width,
  ),
  child: Stack(
    fit: StackFit.expand,
    children: [
      buildListView(scrollController),
      Align(
        alignment: Alignment.bottomCenter,
        child: buildBackToTop(scrollController, backtoTop),
      ),
      buildBottomReached(isLastIndex),
    ],
  ),
);
    Login or Signup to reply.
  3. 0

    First, wrap Stack with ListView widget

    Then, move buildBottomReached helper as a sibling of the Stack widget

    return ListView(//this
      children: [
        Stack(
          children: [
            buildListView(),
            buildBackToTop(backtoTop),
            //buildBottomReached(isLastIndex),//move this a sibling of the Stack
          ],
        ),
        buildBottomReached(isLastIndex),//moved here
      ],
    );

    Then, on buildListView helper, set ListView.builder property shrinkWrap to true.

    Widget buildListView(ScrollController scrollController) {
  return ListView.builder(
      shrinkWrap: true,//this
      controller: scrollController,
      itemCount: 50,
      itemBuilder: (context, index) {
        return SizedBox(
          width: 20,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              width: 20,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black),
                color: Colors.grey[100],
              ),
              child: Center(
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text("Index $index"),
                  ),
                ),
              ),
            ),
          ),
        );
      },
      physics: const BouncingScrollPhysics());
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search