title: How Do I Initialize Variables on App Startup?
body: <p>I am having problems with initializing variables on app start up with flutter. I have a class named SizeConfig and I want to initialize those variables and feed them into my custom AppBar, however, as soon as I start the app, this is what I get.</p>
  
  <p><a href="https://i.stack.imgur.com/TbgWV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TbgWV.png" alt="Image of what I get on app startup"></a></p>
  
  <p>After I tap on one of the tab buttons, then will it get all the variables and fix the appbar as seen below.</p>
  
  <p><a href="https://i.stack.imgur.com/kwwzZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kwwzZ.png" alt="After tapping on one of the items"></a></p>
  
  <p>I want the app to start with everything initialised and the variables set before it draws the navigation bar so that it looks like the second image.</p>
  
  <p>main.dart</p>
  
  <pre><code>import 'package:SportsLink/SizeConfig.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter/rendering.dart';
  import 'package:SportsLink/Home.dart';
  import 'package:SportsLink/Maps.dart';
  import 'package:SportsLink/Clubs.dart';
  import 'package:SportsLink/SearchPage.dart';
  import 'package:SportsLink/Profile.dart';
  import 'my_flutter_app_icons.dart';
  import 'BottomAppBarCustom/src/BottomAppBarCustom.dart';
  
  void main() =&gt; runApp(myApp());
  
  class myApp extends StatefulWidget {
    myAppState createState() =&gt; myAppState();
  }
  
  class myAppState extends State&lt;myApp&gt; {
  
    final PageStorageBucket bucket = PageStorageBucket();
  
  
    int _currentIndex = 0;
    Widget callPage(int currentIndex) {
      switch (currentIndex) {
        case 0: return new Home();
        case 1: return new Maps();
        case 2: return new SearchPage();
        case 3: return new Clubs();
        case 4: return new Profile();
      }
    }
  
    @override
    void initState() {
      // TODO: implement initState
      super.initState();
      print("Initiation!");
      SizeConfig().init(context);
      print("End");
  
    }
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: "SportsLink",
        theme: ThemeData(fontFamily: 'OpenSans'),
        home: Builder(
          builder: (context) =&gt; Scaffold(
          appBar: AppBar(
            title: Text('SportsLink'),
          ),
          body: PageStorage(
              child: callPage(_currentIndex),
            bucket: bucket,
          ),
          bottomNavigationBar: BottomAppBarCustom(
            selectedIndex: _currentIndex,
            onIndexChanged: (current) {
              setState(() {
                _currentIndex = current;
              });
            },
          ),
        ),
      ),
      );
    }
  }
  </code></pre>
  
  <p>AnimatedBottomNavigationBar.dart</p>
  
  <pre><code>import 'package:SportsLink/Clubs.dart';
  import 'package:SportsLink/Home.dart';
  import 'package:SportsLink/Maps.dart';
  import 'package:SportsLink/Profile.dart';
  import 'package:flutter/material.dart';
  import 'package:SportsLink/SizeConfig.dart';
  
  class AnimatedBottomNavigationBar extends StatefulWidget {
  
    final List&lt;BarItem&gt; barItems;
    final Duration animationDuration;
    final Function onTabTap;
  
  
  
  
    AnimatedBottomNavigationBar({this.barItems, this.animationDuration = const Duration(milliseconds: 500), this.onTabTap});
  
    @override
    _AnimatedBottomNavigationBarState createState() =&gt; _AnimatedBottomNavigationBarState();
  }
  
  class _AnimatedBottomNavigationBarState extends State&lt;AnimatedBottomNavigationBar&gt; with TickerProviderStateMixin{
  
    double bottomPadding = SizeConfig.blockSizeHorizontal*6;
    double leftPadding = SizeConfig.blockSizeHorizontal * 4;
  
    int _selectedIndex = 0;
  
  
    @override
    Widget build(BuildContext context) {
      return Material(
        elevation: 10.0,
        child: InkWell(
          splashColor: Colors.transparent,
          onTap: () {
            setState(() {
  
            });
          },
          child: Padding(
            padding: EdgeInsets.only(bottom: SizeConfig.blockSizeHorizontal*5, left:SizeConfig.blockSizeHorizontal*2.5, top: SizeConfig.blockSizeHorizontal*5, right: 8.0),
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: _buildBarItems(),
            ),
          ),
        ),
      );
    }
  
    List&lt;Widget&gt; _buildBarItems() {
      List&lt;Widget&gt; _barItems = List();
      for (int i = 0;i&lt;widget.barItems.length;i++) {
        BarItem item = widget.barItems[i];
        bool isSelected = _selectedIndex == i;
        _barItems.add(InkWell(
          splashColor: Colors.transparent,
          onTap: () {
            setState(() {
              _selectedIndex = i;
              widget.onTabTap(_selectedIndex);
            });
          },
          child: AnimatedContainer(
            padding: EdgeInsets.only(right: SizeConfig.blockSizeHorizontal*3.5, top: 8.0, bottom: 8.0, left: SizeConfig.blockSizeHorizontal*3.5),
            duration: widget.animationDuration,
            decoration: BoxDecoration(
              color: isSelected ? item.color.withOpacity(0.15) : Colors.transparent,
              borderRadius: BorderRadius.all(Radius.circular(30.0)),
            ),
            child: Row(
              children: &lt;Widget&gt;[
                Icon(item.icon,
                  color: isSelected ? item.color : Colors.black,
                size: 28.0,),
                SizedBox(
                  width: 5.0,
                ),
                AnimatedSize(
                  duration: widget.animationDuration,
                  curve: Curves.easeInOut,
                  vsync: this,
                  child: Text(
                      isSelected ? item.text : "",
                    style: TextStyle(color: item.color, fontWeight: FontWeight.w600),
                  ),
                ),
              ],
            ),
          ),
        ));
      }
      return _barItems;
    }
  }
  
  
  class BarItem {
    String text;
    IconData icon;
    Color color;
  
    BarItem({this.text, this.icon, this.color});
  }
  </code></pre>
  
  <p>SizeConfig.dart</p>
  
  <pre><code>import 'package:geolocator/geolocator.dart';
  
  class SizeConfig {
    static MediaQueryData _mediaQueryData;
    static double screenWidth;
    static double screenHeight;
    static double blockSizeHorizontal;
    static double blockSizeVertical;
    static double _safeAreaHorizontal;
    static double _safeAreaVertical;
    static double safeBlockHorizontal;
    static double safeBlockVertical;
    static Map&lt;String, double&gt; userLocation;
    static Position position;
  
    void init(BuildContext context) async {
      _mediaQueryData = MediaQuery.of(context);
      screenWidth = _mediaQueryData.size.width;
      screenHeight = _mediaQueryData.size.height;
      blockSizeHorizontal = screenWidth/100;
      blockSizeVertical = screenHeight/100;
      _safeAreaHorizontal = _mediaQueryData.padding.left +
          _mediaQueryData.padding.right;
      _safeAreaVertical = _mediaQueryData.padding.top +
          _mediaQueryData.padding.bottom;
      safeBlockHorizontal = (screenWidth - _safeAreaHorizontal)/100;
      safeBlockVertical = (screenHeight - _safeAreaVertical)/100;
      getCurrentLocation();
  
    }
  
    void getCurrentLocation() async {
      Position res = await Geolocator().getCurrentPosition();
      position = res;
    }
  }
  </code></pre>
  
  <p>BottomAppBarCustom.dart</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'package:SportsLink/BottomAppBarCustom/src/AnimatedBottomNavigationBar.dart';
  
  
  class BottomAppBarCustom extends StatefulWidget {
  
    final ValueChanged&lt;int&gt; onIndexChanged;
    final int selectedIndex;
  
    final List&lt;BarItem&gt; barItems = [
      BarItem(
        text: "Home",
        icon: Icons.home,
          color: Colors.teal
      ),
      BarItem(
        text: "Maps",
        icon: Icons.map,
          color: Colors.teal
      ),
      BarItem(
          text: "Search",
          icon: Icons.search,
          color: Colors.teal
      ),
      BarItem(
        text: "Clubs",
        icon: Icons.assignment_ind,
          color: Colors.teal
      ),
      BarItem(
        text: "Profile",
        icon: Icons.person,
          color: Colors.teal
      ),
  
    ];
  
    BottomAppBarCustom({
      @required this.onIndexChanged,
      @required this.selectedIndex,
    });
  
    @override
    _BottomAppBarCustomState createState() =&gt; _BottomAppBarCustomState();
  }
  
  
  
  class _BottomAppBarCustomState extends State&lt;BottomAppBarCustom&gt; {
  
  
    int _selectedIndex = 0;
  
    @override
    Widget build(BuildContext context) {
      return AnimatedBottomNavigationBar(
          barItems: widget.barItems,
          animationDuration: const Duration(milliseconds: 250),
          onTabTap: (index) {
            _selectedIndex = index;
            widget.onIndexChanged(index);
          }
      );
    }
  }
  </code></pre>