How to use the pageview inside show dialog (Flutter)?

Question

The first section is an automatic page that I want to make in a dialog box with Flutter.

This is the code I used to try it out, but I couldn't get to what I wanted

Please help me with this by showing the pageView and auto indicator in the dialog

import 'package:flutter/material.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final PageController _controller = PageController(initialPage: 0);

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text("Show Dialog"),
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) => AlertDialog(
                title: const Text('Warning'),
                content: PageView(
                  controller: _controller,
                  children: [
                    Container(width: double.infinity, height: double.infinity, color: Colors.yellow),
                    Container(width: double.infinity, height: double.infinity, color: Colors.red),
                    Container(width: double.infinity, height: double.infinity, color: Colors.black),
                  ],
                ),
                actionsAlignment: MainAxisAlignment.center,
                actions: <Widget>[
                  Column(
                    children: [
                      ElevatedButton(onPressed: () {}, child: const Text("CONTINUE")),
                      OutlinedButton(onPressed: () {}, child: const Text("NO THANKS"))
                    ],
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

Answer 1

We need to provide size on PageView . Based on your attached image, I am using LayoutBuilder to get the constraints and providing 30% height of the dialog. Use constraints to provide size.

showDialog(
    context: context,
    builder: (BuildContext context) =>
        LayoutBuilder(builder: (context, constraints) {
          debugPrint("${constraints.toString()}");
          return AlertDialog(
            title: const Text('Warning'),
            content: Column(
              children: [
                SizedBox(
                  height: constraints.maxHeight * .3,
                  width: constraints.maxWidth,
                  child: PageView(
                    controller: _controller,
                    children: [
                      Container(color: Colors.yellow),
                      Container(color: Colors.red),
                      Container(color: Colors.black),
                    ],
                  ),
                ),
              ],
            ),
            actionsAlignment: MainAxisAlignment.center,
            actions: <Widget>[
              Column(
                children: [
                  ElevatedButton(
                      onPressed: () {},
                      child: const Text("CONTINUE")),
                  OutlinedButton(
                      onPressed: () {},
                      child: const Text("NO THANKS"))
                ],
              ),
            ],
          );
        }));

If you find the content get overflow after adding many widget wrap top column with SingleChildScrollView

showDialog(
    context: context,
    builder: (BuildContext context) =>
        LayoutBuilder(builder: (context, constraints) {
          debugPrint("${constraints.toString()}");
          return AlertDialog(
            title: const Text('Warning'),
            content: SingleChildScrollView(
              child: Column(

More about LayoutBuilder