Thinking & coding: linking the NavRail to the screens.

In this session I have created all the main screens of my app that I will need. In my case, those are 5 main screens that can be reached from the navigation page. I have created these screens because I need them to test the navigation rail routing. For now I just colored all screens. Offcourse I had to imort all the screens, to be able to call them.


In the Classe HomeScreenState I have made a list of the different main screens. This list is then linked to the selected index of the Navigation Rail. And so I can call up and display the screens to the right of the Rail. This was compleet new to me.


I would love to hear in the comments whether this is the correct way of routing or whether it can be done in a better way.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
class HomeScreen extends StatefulWidget {
  HomeScreen({Key key}) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> {
  int selectedIndex = 0;

  var list = [
    NavigationScreen(),
    EventScreen(),
    ParkScreen(),
    FoodScreen(),
    SosScreen()
  ];

Wow, this was actually a nice new milestone in my app for me.

In the next session I will build the NavigationScreen. I'm going to do this in the standard theme colors. Then I want to adapt the project theme to the prototype design. For that I will have to study how to best build my own theme. The problem is that I have already found so many different ways on the internet and youtube that I don't know which is the best or the most perfomant. After all, this is a project that is going into production and not a test.


Do, believe and be happy,


Stefaan




Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import 'package:flutter/material.dart';
import 'package:my_first_production/screens/events_screen.dart';
import 'package:my_first_production/screens/food_screen.dart';
import 'package:my_first_production/screens/navigation_screen.dart';
import 'package:my_first_production/screens/park_screen.dart';
import 'package:my_first_production/screens/sos_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of my application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(), //is the landingspage where all navigation happens. Inside this screen is the Naviagtion screen.
    );
  }
}
// this screen holds the ROW with left the NavRail end right the screens

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

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

class _HomeScreenState extends State<HomeScreen> {
  int selectedIndex = 0;

  var list = [
    NavigationScreen(),
    EventScreen(),
    ParkScreen(),
    FoodScreen(),
    SosScreen()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          NavigationRail(
            onDestinationSelected: (newIndex) {
              setState(() {
                selectedIndex = newIndex;
              });
            },
            elevation: 3,
            backgroundColor: Colors.green[100],
            groupAlignment: 0,
            selectedIndex: selectedIndex,
            destinations: [
              NavigationRailDestination(
                icon: Icon(Icons.home_outlined),
                label: Text('Home'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.event_available),
                label: Text('Events'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.local_parking_outlined),
                label: Text('Parking'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.fastfood_outlined),
                label: Text('Food'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.medical_services_outlined),
                label: Text('S.O.S.'),
              ),
            ],
          ),
          Expanded(
            child: Stack(
              children: <Widget>[list[selectedIndex],],
            ),
          )
        ],
      ),
    );
  }
}



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        image: DecorationImage(
            image: AssetImage('assets/images/Background.png'),
            fit: BoxFit.cover),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Column(
          children:[
            SizedBox(height:100),
            Padding(
              padding: const EdgeInsets.fromLTRB(20, 0, 0, 0),
              child: Text('Home Screen'),
            ),
          ]
        ),
      ),
    );
  }
}
Location: Antwerp, Belgium

Comments

Post a Comment

Popular posts from this blog

Thinking & coding: Linking Firebase to my Flutter App. Watch out for a important detail.

Image
The last programming session was a leap in the dark. For the first time I linked a FireBase project to an app. On the Firebase website you have to make sure you use the explanation for "frameworks", below that you will find the installation guide for Flutter framwork. The complete installation, including the dependencies and such, is well described. However, I got a whole series of error messages. My heart sank for a moment. I didn't understand any of the error messages. All I could tell from the error messages is that the error probably occurred somewhere in the "app / build.gradle". I started reading this file and there I saw the minumum SDK level. And then the light was turned on in my dark tunnel of challenges. Long live Youtube. I had watched a video by Andy Julow prior to my programming session. And in the video, he warned about the following. The mininmum android SDK version is at 16. The version must be at least 21. And indeed, when I changed this settin
Read more

Software developer yes, but where to begin?

Image
The decision has been made  and I am going for a career as an SE, what now?  What are we going to program and how do we get started?  Whe start immediately with two very difficult questions.  How are we going to answer these? What do I want to achieve with a career change?  Freedom and being creative.  Those are my conditions that are my priorities. From this I can already rule out the first option of industrial programming.  Because then I have to go to factories to do programming.  So no freedom.  So a big no no!  We go for independent programming.  Freedom guaranteed! But what are we going to program?   Where can I use my creativity?  Where can I start using the other hemisphere of my brain.  So in your own creations.  Own designs and ideas.  People talk a lot about apps and I have plenty of ideas for that.  That's what we're going for!  Long live creative freedom. But how do I generate an income from all my ideas? No sooner said than done.  the investigation can begin. Ma
Read more

Thinking & coding: Small but important code implementations.

I was still able to employ a short programming session on Sunday. Yes, it will be difficult at this time to quietly program a few hours apart. It is very busy at work and with the "limited" holidays coming up, the family and relatives are also taking a little more time. So I produced a few little things. I also expanded my database with a few documents to test scrolling in the eventScreen. Then I have tested my App in as many situations as possible. Overflow There appears to be an overflow in the Row widgets of the eventCards, If the administrator of the backend enters texts that are too long, there is a problem. Text space is fairly limited in the UI, so I had to make sure that the code catches these errors. The only way I could find that works the way I want it to is to package the Row Widget with a Container Widget. And start using the dimension properties of this widget. Now space is limited and the widget will trim the excess text. Device orientation I also locked the d
Read more