介绍屏幕后重定向页面

Question

有人可以帮我吗

我有 3 个介绍页面，当用户到达最后一个介绍页面时，我希望它自动重定向到主页，延迟 5 秒左右，或者我想用重定向到主页的按钮替换图标。

import 'package:flutter/material.dart';


class OnBoardMain extends StatelessWidget {
  OnBoardMain({super.key});
  final _controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(backgroundColor: Colors.transparent),
      body: Column(
        children: [
          Expanded(
            child: PageView(
              controller: _controller,
              children: const [
                OnBoardScreen(),
                OnBoardScreen2(),
                OnBoardScreen3(),
              ],

              ///

              ///
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 50),
            child: SmoothPageIndicator(
              controller: _controller,
              count: 3,
              effect: const ExpandingDotsEffect(
                activeDotColor: Colors.black,
                dotColor: Colors.white,
                dotHeight: 8,
                dotWidth: 15,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

1. 将 OnBoardMain 从无状态转换为有状态。

//用按钮替换平滑页面指示器，然后单击该按钮导航到另一个屏幕。

class OnBoardMain extends StatefulWidget {
  const OnBoardMain({super.key});

  @override
  State<OnBoardMain> createState() => _OnBoardMainState();
}

class _OnBoardMainState extends State<OnBoardMain> {
  final _controller = PageController();

  bool isLastPage = false;

  void _navigate() {
    Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) {
      return const AnotherScreen();
    }));
  }


  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      if (_controller.page == 2.0) {
        setState(() {
          isLastPage = true;
        });
      }
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(backgroundColor: Colors.transparent),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.animateTo(1.0,
              duration: const Duration(seconds: 1), curve: Curves.linear);
        },
      ),
      body: Column(
        children: [
          Expanded(
            child: PageView(
              controller: _controller,
              children: const [
                OnBoardScreen(),
                OnBoardScreen2(),
                OnBoardScreen3(),
              ],

              ///

              ///
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 50),
            child: isLastPage
                ? CupertinoButton(
                    padding: EdgeInsets.zero,
                    child: Container(
                        padding: const EdgeInsets.all(20),
                        decoration: const BoxDecoration(
                            shape: BoxShape.circle, color: Colors.blue),
                        child: const Icon(Icons.arrow_right_alt_outlined)),
                    onPressed: () {
                      _navigate();
                    })
                : SmoothPageIndicator(
                    controller: _controller,
                    count: 3,
                    effect: const ExpandingDotsEffect(
                      activeDotColor: Colors.blue,
                      dotColor: Colors.black,
                      dotHeight: 8,
                      dotWidth: 15,
                    ),
                  ),
          ),
        ],
      ),
    );
  }
}

//5 秒后自动导航到介绍最后一页的另一个屏幕

1. //更新initState()

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      if (_controller.page == 2.0) {
        Future.delayed(const Duration(seconds: 5)).then((_) {
          _navigate();
        });
      }
    });
  }

2. 删除按钮代码，只显示平滑页面指示器

  Padding(
            padding: const EdgeInsets.only(bottom: 50),
            child: SmoothPageIndicator(
              controller: _controller,
              count: 3,
              effect: const ExpandingDotsEffect(
                activeDotColor: Colors.blue,
                dotColor: Colors.black,
                dotHeight: 8,
                dotWidth: 15,
              ),
            ),
          ),