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?.

Answer 1

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