CODEWITHSUNDEEP
dartnavigationflutter
Suragch
Suragch

Reputation: 511556

Navigate to a new screen in Flutter

How do you navigate to a new screen in Flutter?

These questions are similar, but are asking more than I am.

I am adding an answer below.

Upvotes: 59

Views: 183934

Answers (15)

Reza Mohamed
Reza Mohamed

Reputation: 1

      const FlutterContactsExample(),
    );

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

  @override
  _FlutterContactsExampleState createState() => _FlutterContactsExampleState();
}

class _FlutterContactsExampleState extends State<FlutterContactsExample> {
  List<Contact>? _contacts;
  bool _permissionDenied = false;

  @override
  void initState() {
    super.initState();
    _fetchContacts();
  }

  Future _fetchContacts() async {
    if (!await FlutterContacts.requestPermission(readonly: true)) {
      setState(() => _permissionDenied = true);
    } else {
      final contacts = await FlutterContacts.getContacts();
      setState(() => _contacts = contacts);
    }
  }

  @override
  Widget build(BuildContext context) => MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            leading: IconButton(
              onPressed: () {},
              color: Colors.white,
              icon: Icon(Icons.arrow_back),
            ),
            title: const Text('contacts'),
            titleTextStyle: TextStyle(color: Colors.white, fontSize: 22),
            centerTitle: true,
            backgroundColor: Colors.black,
          ),
          backgroundColor: Color.fromRGBO(244, 244, 244, 1),
          body: _body(),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const page_sarveradd(),
                  ));
            },
            child: Icon(Icons.textsms), // آیکون دکمه
            backgroundColor: Colors.green, // رنگ پس زمینه دکمه
          ),
        ),
      );
Exception has occurred.
FlutterError (Navigator operation requested with a context that does not include a Navigator.
The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.) ```

Upvotes: 0

Mehran Ullah
Mehran Ullah

Reputation: 792

flutter_quick_router: ^0.0.2

The QuickRouter provides handy methods for navigating between routes using the Navigator widget in Flutter. It supports both regular and restorable routes and offers various transition types.

To navigate to other screen

context.to(const SecondScreen());

Going back old screen

context.back();

Upvotes: 1

selvaraj9k
selvaraj9k

Reputation: 53

FloatingActionButton(
  onPressed: (){
    Navigator.of(context).push(MaterialPageRoute(builder: (context) => const AddUser()));
  },
  child: const Icon(Icons.add),
),

Upvotes: 3

Suragch
Suragch

Reputation: 511556

Navigate to a new screen:

Navigator.of(context).push(MaterialPageRoute(builder: (context) => NewScreen()));

where context is the BuildContext of a widget and NewScreen is the name of the second widget layout.

enter image description here

Code

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          child: const Text(
            'Navigate to a new screen >>',
            style: TextStyle(fontSize: 24.0),
          ),
          onPressed: () {
            _navigateToNextScreen(context);
          },
        ),
      ),
    );
  }

  void _navigateToNextScreen(BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(builder: (context) => NewScreen()));
  }
}

class NewScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('New Screen')),
      body: const Center(
        child: Text(
          'This is a new screen',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
    );
  }
}

See also

Upvotes: 87

Enough Technology
Enough Technology

Reputation: 795

In formal method :

Navigator.push(context, MaterialPageRoute(builder: (context)=>Second()));

In GetX method :

Get.to(Second());

If we can navigate screen into another page and delete current page from stack then we can use method which is define below :

Get.off(Third());

If we can navigate screen into another page and delete all route or page from stack then we can use the method which is define below :

Get.offAll(Third());

If we want to use Navigator.pop() then GetX give a Method which is define below :

Get.back();

Upvotes: 4

payal_makwana
payal_makwana

Reputation: 54

This way you can present the next screen

Navigator.of(context).push(
   MaterialPageRoute(fullscreenDialog: true,
   builder: (context) => const NewScreen(),
   ),
);

Upvotes: 0

ebenjs
ebenjs

Reputation: 429

With the Get plugin, you can navigate to a new page by simply calling

Get.to(Page());

Upvotes: 0

Saban Emre Cat
Saban Emre Cat

Reputation: 21

you can use that way in your build widget

onTap: () { Navigator.of(context).push(MaterialPageRoute( builder: (context) => NewScreen()));},

Upvotes: 2

live-love
live-love

Reputation: 52366

Here is a full example of routes push / pop:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Routes',
      routes: {
        '/login': (BuildContext context) => Login(),
        // add another route here
        // '/register': (BuildContext context) => Register(),
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Routes'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
              onPressed: () {
                // This gives the back button:
                Navigator.of(context).pushNamed('/login');

                // This doesn't give the back button (it replaces)
                //Navigator.pushReplacementNamed(context, '/login');
              },
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

class Login extends StatefulWidget {
  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Login Page'),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
              // This will only work for pushNamed
              Navigator.of(context).pop();
            },
            child: Text('Go back'),
          ),
        ));
  }
}

Upvotes: 5

inmyth
inmyth

Reputation: 9050

To load new screens with Flutter pre-canned animations, use their respective transition classes. For example:

Container Transformation

enter image description here

Basically we have the first widget or screen transform into the next screen. For this we need to use OpenContainer. The following code illustrates an item in a ListView transformed to its details page.

  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      elevation: 2.0,
      child: OpenContainer(
        transitionType: ContainerTransitionType.fadeThrough,
        closedColor: Theme.of(context).cardColor,
        closedElevation: 0.0,
        openElevation: 4.0,
        transitionDuration: Duration(milliseconds: 1500),
        openBuilder: (BuildContext context, VoidCallback _) => THENEXTSCREEN(),
        closedBuilder: (BuildContext _, VoidCallback openContainer) {
          return ListTile(
            leading: Icon(Icons.album),
            title: Text("ITEM NAME"),
          );
        },
      ),
    );
  }

Shared Axis

enter image description here

This transition is similar to that in Tab or Stepper. We need SharedAxisTransition, PageTransitionSwitcher, along with a state to model transition between active and previous page. If we only switch between two pages we can use a simple boolean isFirstPage for it. Here's the snippet with Provider as state management:

  @override
  Widget build(BuildContext context) {
    return Consumer<YourState>(
      builder: (context, state, child) {
        return PageTransitionSwitcher(
          duration: const Duration(milliseconds: 1500),
          reverse: !state.isFirstPage, // STATE
          transitionBuilder: (
            Widget child,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) {
            return SharedAxisTransition(
              child: child,
              animation: animation,
              secondaryAnimation: secondaryAnimation,
              transitionType: SharedAxisTransitionType.horizontal,
            );
          },
          child: state.isFirstPage? FIRSTPAGE() : SECONDPAGE(), // STATE
        );
      },
    );
  }

Note that in all these scenarios we don't use Navigator and MaterialPageRoute. All these codes are derived from animations repo so you may want to check it out first.

Upvotes: 24

Chethiya Nishanath
Chethiya Nishanath

Reputation: 153

If you are familiar with web development this approach is similar to routing.

main.dart

void main() {
  setupLocator();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      routes: {
        '/' : (BuildContext context)=>HomePage(),
        '/register' : (BuildContext context)=>RegisterPage(),
      },
    );
  }
}

You can add button onPressed event from the homepage.dart to navigate register.dart as follows.

onPressed: (){
    Navigator.pushReplacementNamed(context, '/register');
 },

Upvotes: 4

Casper
Casper

Reputation: 69

I found a good tutorial that I have followed along, it is very comprehensive with screenshots and step by step, you can also download the code and just run it. Very helpful for me learning Flutter especially I am totally a begineer.

https://medium.com/@misterflutter/lesson-5-creating-new-screens-f740994190c7

https://medium.com/@misterflutter/lesson-6-creating-new-screens-part-2-4997085a43af?sk=d2a0fb723af42b78800f7cf19b312b62

Upvotes: 1

Gowtham Subramaniam
Gowtham Subramaniam

Reputation: 3478

Navigate to next screen with back using Navigator.push()

Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),);

Navigate to next screen without back using Navigator.pushReplacement()

Navigator.pushReplacement(
context,MaterialPageRoute(builder: (context) => SecondRoute()),);

Upvotes: 16

Chandsi Gupta
Chandsi Gupta

Reputation: 107

onTap: () {
  Navigator.push(context,
      MaterialPageRoute(builder: (context) => NextScreenName()));
}

Upvotes: 5

androiduser
androiduser

Reputation: 189

You can try with the following code

Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => YourNextScreen())),

Upvotes: 1

Related Questions