How to make the app jump to another page after clicking text : Flutter-CodePudding

I am developing a flutter app and i need to make a text on tap detection, i.e on clicking on the word "skip" the app should go to page 4. i have 4 pages in my app. and i have called all of them in homepage. Home page code:

import 'package:final_project/pages/pages1.dart';
import 'package:final_project/pages/pages2.dart';
import 'package:final_project/pages/pages3.dart';
import 'package:final_project/pages/pages4.dart';
import 'package:final_project/pages/pages5.dart';
import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';

class HomePage extends StatelessWidget {
  final _controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color.fromARGB(255, 215, 202, 199),
        body: Column(
          children: [
            Expanded(
              child: PageView(controller: _controller, children: const [
                pagg1(),
                pagg2(),
                pagg3(),
                pagg4(),
                pagg5()
              ]),
            ),
            Padding(
              padding: const EdgeInsets.only(bottom: 25),
              child: SmoothPageIndicator(
                controller: _controller,
                count: 5,
                effect: WormEffect(
                    activeDotColor: Colors.black, dotWidth: 12, dotHeight: 12),
              ),
            )
          ],
        ));
  }
}

See i have called all the pages here, now in page 1,i need to add a feature so when clicked on "skip" text, the app has to redirect to page 4. The Code of page 1:

import 'package:final_project/pages/pages2.dart';
import 'package:flutter/material.dart';

class pagg1 extends StatelessWidget {
  const pagg1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          backgroundColor: Color.fromARGB(255, 215, 202, 199),
          body: Column(
            // mainAxisAl    ignment: MainAxisAlignment.center,
            children: [
              Container(
                // decoration: BoxDecoration(),
                padding: EdgeInsets.only(top: 50),
                child: Image.asset("assets/images/page1.png"),
              ),
              SizedBox(height: 10),
              Center(
                child: Container(
                  padding: EdgeInsets.only(top: 40),
                  child: Text(
                    'Yoga Surge',
                    style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 26),
                child: Center(
                  child: Text(
                    'Welcome to Yoga World',
                    style: TextStyle(fontSize: 24),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 22),
                child: Center(
                  child: Text(
                    'Inhale the future, exhale the past',
                    style: TextStyle(fontSize: 17),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
              Padding(
                  padding: EdgeInsets.only(top: 430, right: 240),
                  child: Center(
                    child: Text(
                      "Skip",
                      style:
                          TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                    ),
                  ))
            ],
          )),
    );
  }
}

I will insert screenshot of the app and code side by side.

CodePudding user response：

You can use a callback method on pagg1 widget.

class pagg1 extends StatelessWidget {
  final Function(int) tappedIndex;
  const pagg1({Key? key, required this.tappedIndex}) : super(key: key);

Now on wrap the Text widget with tappable widget or use RichText.

child: GestureDetector(
  onTap: () {
    tappedIndex(4);
  },
  child: Text(
    "Skip",
    style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
  ),
),

Now on HomePage

Expanded(
  child: PageView(controller: _controller, children: [
    pagg1(
      tappedIndex: (p0) {
        if (p0 == 4) {
           //_controller.jumpToPage(4);
          _controller.animateToPage(4,
              duration: Duration(milliseconds: 300),
              curve: Curves.bounceIn);
        }
      },
    ),

Test snippet


class HomePage extends StatelessWidget {
  final _controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromARGB(255, 215, 202, 199),
      body: Column(
        children: [
          Expanded(
            child: PageView(controller: _controller, children: [
              pagg1(
                tappedIndex: (p0) {
                  if (p0 == 4) {
                    _controller.jumpToPage(4);
                  }
                },
              ),
              pagg2(),
              pagg2(),
              pagg2(),
              pagg2(),
            ]),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 25),
            child: SmoothPageIndicator(
              controller: _controller,
              count: 5,
              effect: WormEffect(
                  activeDotColor: Colors.black, dotWidth: 12, dotHeight: 12),
            ),
          )
        ],
      ),
    );
  }
}

class pagg2 extends StatelessWidget {
  const pagg2({super.key});

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class pagg1 extends StatelessWidget {
  final Function(int) tappedIndex;
  const pagg1({Key? key, required this.tappedIndex}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          backgroundColor: Color.fromARGB(255, 215, 202, 199),
          body: Column(
            // mainAxisAl    ignment: MainAxisAlignment.center,
            children: [
              Center(
                child: Container(
                  padding: EdgeInsets.only(top: 40),
                  child: Text(
                    'Yoga Surge',
                    style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 26),
                child: Center(
                  child: Text(
                    'Welcome to Yoga World',
                    style: TextStyle(fontSize: 24),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 22),
                child: Center(
                  child: Text(
                    'Inhale the future, exhale the past',
                    style: TextStyle(fontSize: 17),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 430, right: 240),
                child: GestureDetector(
                  onTap: () {
                    tappedIndex(4);
                  },
                  child: Text(
                    "Skip",
                    style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                  ),
                ),
              )
            ],
          )),
    );
  }
}

CodePudding user response：

You could use TextButton() instead of Text(), and inside TextButton() you use

onPressed(){Navigator.push(context, YourPage());}