Managing routing and state from a central place in flutter

Question

I have this simple flutter app that consists of just two pages linked with the router which is defined in the main() function. However, i would like to isolate my classes into their own files since my app consists of many pages. Here is my code

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
    title: 'Named Routes',
    initialRoute: '/',
    routes: {
    '/': (context) => const firstRoute(),
    '/second': (context) => const secondRoute(),
    },
));
}

// ignore: camel_case_types
class firstRoute extends StatelessWidget {
const firstRoute({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
        title: const Text('GFG First Route'),
        backgroundColor: Colors.green,
    ),
    body: Center(
        child: ElevatedButton(
        child: const Text('Launch screen'),
        onPressed: () {
            Navigator.pushNamed(context, '/second');
        },
        ), // Elevated

        // RaisedButton is deprecated now
        // child: RaisedButton(
        // child: const Text('Launch screen'),
        // onPressed: () {
        //   Navigator.pushNamed(context, '/second');
        // },
        // ),
    ),
    );
}
}

// ignore: camel_case_types
class secondRoute extends StatelessWidget {
const secondRoute({Key? key}) : super(key: key);

@override
// ignore: dead_code
Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
        title: const Text("GFG Second Route"),
        backgroundColor: Colors.green,
    ),
    body: Center(
        child: ElevatedButton(
        onPressed: () {
            Navigator.pop(context);
        },
        child: const Text('Go back!'),
        ), // ElevatedButton
    ),

    // RaisedButton is deprecated now
    // child: RaisedButton(
    // onPressed: () {
    //   Navigator.pop(context);
    // },
    // child: const Text('Go back!'),
    // ),
    );
}
}

How would i go about isolating each of my classes in separate .dart files and still make use of the routing defined in main?

Also, i would like to have some global state accessible in each of the dart files i shall create. How would i go about solving the first and second problems?.

iamdipanshus · Accepted Answer · 2022-08-31T04:49:00.437

you can separate your current code into 3 files.

1: main.dart

import 'package:flutter/material.dart';
import 'package:<app_name>/screens/firstRoute.dart';
import 'package:<app_name>/screens/secondRoute.dart';

// this is a globally available variable
final valueNotifier = ValueNotifier('hello');

void main() {
  runApp(MaterialApp(
    title: 'Named Routes',
    initialRoute: '/',
    routes: {
      '/': (context) => const firstRoute(),
      '/second': (context) => const secondRoute(),
    },
  ));
}

2: firstFile.dart

class firstRoute extends StatelessWidget {
  const firstRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GFG First Route'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Launch screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

3: secondFile.dart

// imported main.dart so that we can use valueNotifier
import 'package:<app_name>/main.dart';
import 'package:flutter/material.dart';

class secondRoute extends StatelessWidget {
  secondRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GFG Second Route"),
        backgroundColor: Colors.green,
      ),
      body: Column(children: [
        ValueListenableBuilder(
          valueListenable: valueNotifier,
          builder: ((BuildContext context, String updatedValue, Widget? child) {
            return Text(updatedValue);
          }),
        ),
        Center(
          child: ElevatedButton(
            onPressed: () {
              valueNotifier.value = 'got changed';
            },
            child: const Text('Change me'),
          ), // ElevatedButton
        ),
      ]),
    );
  }
}

once you've separated the files, you'll need to import them... say, you've created the files in lib/screens

so, the import line will be something like this, vs code/Android Studio can take care of it
import 'package:<app_name>/screens/secondRoute.dart';

for global state management, you can have a ValueNotifier which is globally exposed from main.dart you can simply listen to its change via ValueListenableBuilder a very basic implementation is shown as well
although this is not recommended for bigger projects, if that's the case then you should use something like provider

Managing routing and state from a central place in flutter

1 Answers1