- Customizing Fonts in Flutter with ExampleFlutter Skeleton Text with ExampleFlutter Themes with ExampleFlutter Lazy Loader with ExampleFlutter UI Orientation with ExampleFlutter Animation in Route Transition with ExampleFlutter Physics Simulation in Animation with ExampleFlutter Radial Hero Animation with ExampleFlutter Hinge Animation with ExampleFlutter Lottie Animation with Example
- URLs in Flutter with ExampleRoutes and Navigator in FlutterFlutter WebSockets with ExampleFlutter Named Routes with ExampleFlutter Arguments in Named RoutesMulti Page Applications in FlutterFlutter Updating Data on the InternetFlutter Fetching Data From the InternetFlutter Deleting Data On The InternetFlutter Sending Data To The InternetFlutter Send Data to Screen with Example
Routes and Navigator in Flutter
In Flutter, routes and the Navigator class are used for navigating between screens in your app. When using routes, you define named routes for each screen in your app, and then use the Navigator class to navigate between them.
Here's an example of how to use routes and the Navigator class in Flutter
Define your named routes in your main.dart file
import 'package:flutter/material.dart';
import 'package:flutter_blog/screens/home_screen.dart';
import 'package:flutter_blog/screens/post_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Blog',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/post': (context) => PostScreen(),
},
);
}
}
In this example, we have defined two named routes: '/' for the home screen and '/post' for the post screen.
In your home screen widget, add a button that will navigate to the post screen
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Blog'),
),
body: Center(
child: ElevatedButton(
child: Text('Read Post'),
onPressed: () {
Navigator.pushNamed(context, '/post');
},
),
),
);
}
}
In this example, we are using the Navigator class to navigate to the post screen when the button is pressed.
In your post screen widget, add a back button that will navigate back to the home screen
import 'package:flutter/material.dart';
class PostScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Blog'),
),
body: Center(
child: ElevatedButton(
child: Text('Go back'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}
In this example, we are using the Navigator class to navigate back to the home screen when the button is pressed.
Finally, run your app and test the navigation between screens using the named routes and the Navigator class:
flutter run
This is just a basic example of how to use routes and the Navigator class in Flutter. You can customize the routes and the navigation to fit your app's specific needs.