I wanted to add a login button below the onboarding screen: how could I do that? Below I have provided the picture of the screen and the code I have implemented so far. Appreciate your help on this.

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

  @override
  _OnBoardingScreenState createState() => _OnBoardingScreenState();
}

class _OnBoardingScreenState extends State<OnBoardingScreen> {
  PageController _controller = PageController();

  //keep track of if we are on the last page or not
  bool onLastPage = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: [
        PageView(
          onPageChanged: (index) {
            setState(() {
              onLastPage = (index == 2);
            });
          },
          controller: _controller,
          children: [
            IntroPageOne(),
            IntroPageTwo(),
            IntroPageThree(),
          ],
        ),

        //dot indicators
        Container(

            alignment: Alignment(0, 0.6),
            child: Row(

              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                //skip

                GestureDetector(
                    onTap: () {
                      _controller.jumpTo(2);
                    },
                    child: Text('Skip', style: TextStyle(
                      height: 1.2,
                      fontFamily: "Roboto",
                      fontSize: 15,
                      color: MainGreen,
                      fontWeight: FontWeight.w500,
                      // fontWeight: FontWeight.w100,
                    ))),

                SmoothPageIndicator(
                  controller: _controller,
                  count: 3,
                  effect:  WormEffect(
                      dotColor:  Colors.grey,
                      activeDotColor:  MainGreen,
                  ),
                ),

                //next or done
                onLastPage
                    ? GestureDetector(
                        onTap: () {
                          Get.to(() => const LoginScreen());
                        },
                        child: Text('Done',
                            style: TextStyle(
                              height: 1.2,
                              fontFamily: "Roboto",
                              fontSize: 15,
                              color: MainGreen,
                              fontWeight: FontWeight.w500,
                              // fontWeight: FontWeight.w100,
                            )),
                      )
                    : GestureDetector(
                        onTap: () {
                          _controller.nextPage(
                            duration: Duration(milliseconds: 500),
                            curve: Curves.easeIn,
                          );
                        },
                        child: Text('Next',  style: TextStyle(
                          height: 1.2,
                          fontFamily: "Roboto",
                          fontSize: 15,
                          color: MainGreen,
                          fontWeight: FontWeight.w500,
                          // fontWeight: FontWeight.w100,
                        )),
                      )
              ],
            )),

         MainButton("Login")
      ],
    ));
  }
}

CodePudding user response：

Step by step:

1. Wrap your Stack by Expanded.
2. Wrap Expanded by Column.
3. Move MainButton("Login") from Stack children to Column children.

Like this:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(child: Stack(...)),
        MainButton("Login"),
      ]
    ),
  );
}

CodePudding user response：

Since your goal is to have 2 widgets displayed in a vertical way, then you should use a Column instead of stacking everything. Something like this

import 'package:flutter/material.dart';

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

  @override
  _OnBoardingScreenState createState() => _OnBoardingScreenState();
}

class _OnBoardingScreenState extends State<OnBoardingScreen> {
  PageController _controller = PageController();

  //keep track of if we are on the last page or not
  bool onLastPage = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Expanded(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Stack(
              children: [
                PageView(
                  onPageChanged: (index) {
                    setState(() {
                      onLastPage = (index == 2);
                    });
                  },
                  controller: _controller,
                  children: [
                    IntroPageOne(),
                    IntroPageTwo(),
                    IntroPageThree(),
                  ],
                ),

                //dot indicators
                Container(
                  alignment: Alignment(0, 0.6),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      //skip

                      GestureDetector(
                        onTap: () {
                          _controller.jumpTo(2);
                        },
                        child: Text(
                          'Skip',
                          style: TextStyle(
                            height: 1.2,
                            fontFamily: "Roboto",
                            fontSize: 15,
                            color: MainGreen,
                            fontWeight: FontWeight.w500,
                            // fontWeight: FontWeight.w100,
                          ),
                        ),
                      ),

                      SmoothPageIndicator(
                        controller: _controller,
                        count: 3,
                        effect: WormEffect(
                          dotColor: Colors.grey,
                          activeDotColor: MainGreen,
                        ),
                      ),

                      //next or done
                      onLastPage
                          ? GestureDetector(
                              onTap: () {
                                Get.to(() => const LoginScreen());
                              },
                              child: Text('Done',
                                  style: TextStyle(
                                    height: 1.2,
                                    fontFamily: "Roboto",
                                    fontSize: 15,
                                    color: MainGreen,
                                    fontWeight: FontWeight.w500,
                                    // fontWeight: FontWeight.w100,
                                  )),
                            )
                          : GestureDetector(
                              onTap: () {
                                _controller.nextPage(
                                  duration: Duration(milliseconds: 500),
                                  curve: Curves.easeIn,
                                );
                              },
                              child: Text(
                                'Next',
                                style: TextStyle(
                                  height: 1.2,
                                  fontFamily: "Roboto",
                                  fontSize: 15,
                                  color: MainGreen,
                                  fontWeight: FontWeight.w500,
                                  // fontWeight: FontWeight.w100,
                                ),
                              ),
                            )
                    ],
                  ),
                ),
              ],
            ),
            MainButton("Login"),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

Try below code hope its helpful to you. I have try without Stack widget Wrap your Button inside Expanded and give its to alignment

Column(
      children: <Widget>[
        Text('All Leads'),
        Text('Widget 2'),
        Text('Widget 3'),
        Text('Widget 4'),
        Expanded(
          child: Align(
            alignment: FractionalOffset.bottomCenter,
            child: ElevatedButton(
              onPressed: () {},
              child: Text('Login'),
            ),
          ),
        ),
      ],
    ),

Result Screen->