Global Variables in Dart

Question

I try to create a Dart single page application.

I have created a first custom element (custom-application) which contains the whole application. It has a container in it which is used to render views. And a side nav which will contain user informations and be updated when the user is log in.

I want to share informations between views. How can I define a global variable in custom-application and be able to share it with the other views ?

For example, when you start the app, you are not authenticated. When you call /login (login-view) you'll have a login form. I want, when you log in the application, the custom-application element stores the user informations loaded by the nested view login-view and update the side nav.

Is it possible to do it ?

Answer 1

Just create a library file and create fields for globals you need there. Import this library everywhere you need access to these fields.

app.dart

import 'globals.dart' as globals;

main() {
  globals.isLoggedIn = true;
}

component1.dart

import 'globals.dart' as globals;

class MyComponent {
  view() {
    if(globals.isLoggedIn) {
      doSomething();
    else {
      doSomethingElse();
    }
  }
}

globals.dart

library my_prj.globals;

bool isLoggedIn = false;

You can also

• create a singleton in the globals library (see How do you build a Singleton in Dart? for more details).
• use observable to get notified about changes (see Implement an Observer pattern in Dart, How can i trigger a kind of onChange event in a class for more details)

Answer 2

You can create a class

myColors.dart

class AppColors {

  static var primary = Colors.blue;
}

And importing your class

import 'package:myapp/.../myColors.dart';

And access with AppColors.primary

Answer 3

I created a dart file that I called my-globals.dart, where I can define my global variables.

Like this:

library globals;

int globalInt = 0;
bool globalBoolean = true;
String globalString = "";
double globalDouble= 10.0;

That's the whole dart file.

And then, within the same directory or folder I can create other classes, where I can access my globals by importing my-globals.dart as globals. Let's create a class that extends StatefulWidget. There we are going to change the value of the global variable named globalInt by pressing a Flatbutton.

import 'package:flutter/material.dart';
import 'my-globals.dart' as globals;

class OtherClass extends StatefulWidget {
  OtherClass({Key key}) : super(key: key);

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

class _OtherClassState extends State<OtherClass> {
  @override
  Widget build(BuildContext context) {
    return Container(
       child: FlatButton(
         color: Colors.blue,
         textColor: Colors.white,
         onPressed: () {
            setState(() {globals.globalInt++;});
            print(globals.globalInt);
         },
       ),
    );
  }
}

You see. I just accessed the variable I wanted by writing globals. and then the name of the variable contained in the library.

Hope this example helps to better understand how to use globals library.

Answer 4

++++ Update July 2019 ++++

I wrote a Package that integrates the Flutter Global Config.

EZ Flutter is a collection of widgets, packages and many more usefull things, mixed up in little framework. The aim is to make standard features available from scratch. EZ Flutter supports managing different configuration files that can be accessed inside the app.

Github : https://github.com/Ephenodrom/EZ-Flutter

dependencies:
  ez_flutter: ^0.2.0

Check out the documentation how using different configurations works.

https://github.com/Ephenodrom/EZ-Flutter/blob/master/documentation/APPLICATION_SETTINGS.md

++++ Old Answer ++++

I had the same problem with global variables. Therefore I also needed different configuration for each app version (dev / prod ) and i don't want to write the configuration in the main_dev.dart or in the main_prod.dart file.

I wrote a simple flutter package that deals with having seperated configuration files and load them at app startup. The configuration is then available at each line of code in your app.

https://github.com/Ephenodrom/Flutter-Global-Config

How to use it :

Create a json file under assets/cfg/$file.json

Add assets/cfg to your pubspec.yaml

Loading different configuration files at app start :

import 'package:flutter/material.dart';
import 'package:global_configuration/global_configuration.dart';

void main() async{
  await GlobalConfiguration().loadFromAsset("app_settings");
  await GlobalConfiguration().loadFromAsset("env_dev_settings");
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  ...
}

Using the configuration in your app :

import 'package:flutter/material.dart';
import 'package:global_configuration/global_configuration.dart';

class CustomWidget extends StatelessWidget {

    CustomWiget(){
        // Access the config in the constructor
        print(GlobalConfiguration().getString("key1"); // prints value1
    }

    @override
     Widget build(BuildContext context) {
        // Access the config in the build method
        return new Text(GlobalConfiguration().getString("key2"));
     }
}

Answer 5

All you need is create a file like "constants.dart"

import '...materials.dart';

const Color baseColor = Color(0XFF353535);

and use like this

import '...constants.dart';
.......
......


....
Container(
color: baseColor,
.....

),

Answer 6

Based on the library idea, here a way to add "keyed" global variables of any type to a map called from other widgets. This way you do not have to declare such variables beforehand. If a variable does not exist it is added to the map by appDataSet. So in a widget like a checkbox you can add for example in the setState() function: appDataSet('aCheckBox',value); If aCheckBox does not exist in the map it is added and the value is loaded with value (in this case a boolean).

library my_prj.globals;

Map appData = Map<String,dynamic>();

void appDataSet(String key, dynamic value) {
  if (!appData.containsKey(key))
    appData.putIfAbsent(key, () => value);
  else
    appData.update(key, (dynamic) => value);
  print(appData);
}

dynamic appDataGet(String key) {
  if (appData.containsKey(key))
    return (appData.putIfAbsent(key, () => {}));
  else
    return (null);
}

Answer 7

Global variables are usually frowned upon. A recommended solution for flutter is a provider library. It's just a widget that you insert somewhere high in the widget tree and give it some value (object, class) to hold. Then you access the value deeper inside other widgets.

Opposed to the global variable you can modify value stored by the provider and widgets deep inside will re-render.

pub.dev/provider

Store value

  Widget build(BuildContext context) {
    String someValue = '5';
    return Provider(
            create: (_) => someValue),
            child: SafeArea(...)
    );
  }

Fetch value:

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

    WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
      setState(() {
        value5 = context.read<String>();
      });
    });
  }