How can I put a button that only shows at specific page on PageView?

I'm creating a PageView with a total of 4 pages. I wanna put a "Next" button that'll move the user to the login page but the button only shows at the 4th page at the bottom right corner and without changing the position of the content of 4th page. How can i do that?

Here's my code

import 'package:flutter/material.dart';
import 'package:food_delivery/login_view/login_view.dart';
import 'package:food_delivery/onboarding_view/onboarding_page.dart';

class OnBoardingView extends StatelessWidget {
  const OnBoardingView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    Widget nextButton() {
      return ElevatedButton(
        onPressed: () {
          Navigator.pushReplacement(
            context,
            MaterialPageRoute(
              builder: (context) => LoginView(),
            ),
          );
        },
        child: Text('Next'),
      );
    }

    final PageController controller = PageController();
    return PageView(
      pageSnapping: true,
      controller: controller,
      children: [
        OnBoardingPage(
            image: 'assets/deliciousfood.png',
            title: 'Delicious Food',
            desc: 'Lorem ipsum'),
        OnBoardingPage(
            image: 'assets/fastshipping.png',
            title: 'Fast Shipping',
            desc: 'Lorem ipsum'),
        OnBoardingPage(
            image: 'assets/certificatefood.png',
            title: 'Certificate Food',
            desc: 'Lorem ipsum'),
        OnBoardingPage(
            image: 'assets/paymentonline.png',
            title: 'Payment Online',
            desc: 'Lorem ipsum'),
      ],
    );
  }
}

CodePudding user response：

Use a Stack widget on the last page with children as,
OnBoardingPage Align(alignment: Alignment.bottomRight, child: nextButton);

For Example:

Scaffold(
      backgroundColor: Colors.deepOrange,
      appBar: AppBar(
        backgroundColor: Colors.deepOrangeAccent,
        title: const Text("S.O Playground"),
        centerTitle: true,
      ),
      body: SafeArea(
        child: Stack(
          children: [
            const SizedBox(
              height: double.infinity,
              width: double.infinity,
              child: Center(
                child: Text(
                  "OnBoarding Page Details.",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Padding(
                padding: const EdgeInsets.only(right: 16),
                child: ElevatedButton(
                  onPressed: () {},
                  child: const Text('Next'),
                ),
              ),
            )
          ],
        ),
      ),
    )