Flutter – Navigating Through Gesture on Images

Flutter apps may have multiple screens or pages. Pages are groups of functionalities. The user navigates between different pages to use different functionalities. Concepts like pages are called routes in Flutter. We can Use Navigator.push() to navigate to a new route and Navigator.pop() to navigate to the previous route. Routes are managed by Navigator widget. The navigator manages a stack of routes. Routes can be pushed on the stack using push() method  and popped off the stack using pop() method. The top element in the stack is the currently active route. Navigator is a stateful widget with NavigatorState as its state. Users of mobiles app are used to gestures when performing actions. For example, when viewing pictures gallery, using swiping gesture can easily navigate between different pictures. In Flutter, we can use the GestureDetector widget to detect gestures and invoke specified callbacks for gestures. A sample video is given below to get an idea about what we are going to do in this article.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Create a Page that show the list of one or more images. We are using the listview widget, When the user tapped on these images then GestureDetector take you the following page.

Dart

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

  @override
  State<A1Run> createState() => _A1RunState();
}

class _A1RunState extends State<A1Run> {
  @override
  Widget build(BuildContext context) {
    // materialapp with debugbanner false
    return MaterialApp(
      debugShowCheckedModeBanner: false,
       home: Scaffold(
        appBar: AppBar(
          title: Text('Navigate Through Images'),
        ),
        body: Container(
          // list to show the list of images
          child: new ListView(
            scrollDirection: Axis.vertical,
            children: [
              Padding(
                padding: const EdgeInsets.all(12.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              // gesture detector to detect the image tab
                              GestureDetector(
                                child: Image.asset(
                                  'assets/gfg.png',
                                ),
                                onTap: () {
                                  Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) => GfGPage()));
                                },
                              ),
                              Text(
                                'Geeks for Geeks',
                                textDirection: TextDirection.ltr,
                              )
                            ],
                          ),
                          Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              GestureDetector(
                                child: Image.asset(
                                  'assets/flutter.jpg',
                                ),
                                onTap: () {
                                  Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) => FlutterPage()));
                                },
                              ),
                              Text(
                                'Flutter',
                                textDirection: TextDirection.ltr,
                              )
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Step 3: Now we have to create the Individual pages that we visit after the tapped.

Dart

// when user tab in flutter image it will
// come to flutter page screen,
class FlutterPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: new Icon(Icons.arrow_back),
            onPressed: () {
              Navigator.push(
                  context, MaterialPageRoute(builder: (context) => A1Run()));
            },
          ),
          title: Text("Flutter Page"),
        ),
        body: Center(
          child: Image.asset("assets/flutter.jpg"),
        ),
      ),
    );
  }
}

Complete Code

Dart

import 'package:flutter/material.dart';

// main method
void main() => runApp(MaterialApp(home:A1Run()));

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

  @override
  State<A1Run> createState() => _A1RunState();
}

class _A1RunState extends State<A1Run> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Navigate Through Images",
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Navigate Through Images'),
        ),
        body: Container(
          child: new ListView(
            scrollDirection: Axis.vertical,
            children: [
              Padding(
                padding: const EdgeInsets.all(12.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              GestureDetector(
                                child: Image.asset(
                                  'assets/gfg.png',
                                ),
                                onTap: () {
                                  Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) => GfGPage()));
                                },
                              ),
                              Text(
                                'Geeks for Geeks',
                                textDirection: TextDirection.ltr,
                              )
                            ],
                          ),
                          Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              GestureDetector(
                                child: Image.asset(
                                  'assets/flutter.jpg',
                                ),
                                onTap: () {
                                  Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) => FlutterPage()));
                                },
                              ),
                              Text(
                                'Flutter',
                                textDirection: TextDirection.ltr,
                              )
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// when user tab in flutter image it will
// come to flutter page screen,
class FlutterPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: new Icon(Icons.arrow_back),
            onPressed: () {
              Navigator.push(
                  context, MaterialPageRoute(builder: (context) => A1Run()));
            },
          ),
          title: Text("Flutter Page"),
        ),
        body: Center(
          child: Image.asset("assets/flutter.jpg"),
        ),
      ),
    );
  }
}

// when user tab in gfg image it
// will come to gfg page screen,
class GfGPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: new Icon(Icons.arrow_back),
            onPressed: () {
              Navigator.push(
                  context, MaterialPageRoute(builder: (context) => A1Run()));
            },
          ),
          title: Text("GFG Page"),
        ),
        body: Center(
          child: Image.asset("assets/gfg.png"),
        ),
      ),
    );
  }
}

Output:

Code Explanation:

• main is a principal method called once the program is loaded.
• Once Program Is Loaded runApp Will Run And Call Our Class That We Created (A1Run) To Be Runned.
• This Class Is Stateless Widget As There Is Not Any Change Of Any Data After The Program Is Loaded.
• As Flutter Is Based On Widget Widget Must Be Builded.
• Creating Material App That Allow Us To Set App Title And The Theme, Taking Scaffold As An Home.
• Scaffold Allow Us to Set AppBar And Body Of The Page.
• As An AppBar It Simple Title.
• As An Body It Take Container That Take A ListView As An Child To Allow Scrolling And Avoid Over Flow.
• ListView Scroll Direction Set Vertical From Up To Down Or Down To Up.
• Taking As Children Rows Padded By 8 Row 1 contains 2 images.
• Each Row Take A 2 Column ( Display Each On Row As We Need Image And Text Under It ).
• Each Column Children Aligned To The Center Taking As First Row An Image Globbed By Gesture Detector To Detect The Tap Once Tape Will Take The User To The Needed Page, Second Row Taking Text Describing Image.
• Finally Creating Pages For Each Navigation (Flutter, GeeksforGeeks) Where It Takes An AppBar With Title And Centered Image As An Body.