Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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),
                  ),
                ),
              )
            ],
          )),
    );
  }
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading