Thinking & coding: building up my landingpage.

In this code session I broadly built the landing page. Everything still with the standard themes and fonts. I also exported the necessary image from Figma to the assetsmap in my flutter project. The great thing about Figma is that you can use the images where you have put time to adjust them in the prototype, straight from the box in Flutter. With the adjustments you made in Figma design.










As you can see from the two images we are not there yet, but the basic widget tree has been built. Only the following properties must be introduced from the prototype. Distances, colors, font, etc.



The second major part of this session I have devoted to centralizing all constant data. Such that the complete app can be adapted to the wishes of the customer in 1 dart file. As they say it so beautifully in Flutter. A dedicated constants library, or did I say this just now hahaha.


The next post will be about adapting or overriding the thema to my prototype specs.

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
import 'package:flutter/material.dart';
import 'package:my_first_production/owner_data/owner_data.dart';

//landing screen right side of the screen
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(navigationScreenBackground),
            fit: BoxFit.cover),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          SizedBox(height: 100),
          Padding(
            padding:
                const EdgeInsets.only(left: leftPaddingNavigationScreenWidgets),
            child: Text(
              'City Visit',
              style: TextStyle(fontSize: 20),
            ),
          ),
          SizedBox(height: 10),
          Padding(
            padding:
                const EdgeInsets.only(left: leftPaddingNavigationScreenWidgets),
            child: Text(
              cityName,
              style: TextStyle(fontSize: 40),
            ),
          ),
          SizedBox(height: 10),
          Padding(
            padding:
                const EdgeInsets.only(left: leftPaddingNavigationScreenWidgets),
            child: Text(
              'Welcome',
              style: TextStyle(fontSize: 20),
            ),
          ),
          SizedBox(height: 10),
          Padding(
            padding: const EdgeInsets.fromLTRB(
                leftPaddingNavigationScreenWidgets / 2,
                0,
                leftPaddingNavigationScreenWidgets / 2,
                0),
            child: Container(
              height: 220,
              width: 300,
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage(navigationScreenCenterImage),
                    fit: BoxFit.cover),
              ),
            ),
          ),
          SizedBox(height: 10),
          Padding(
            padding:
                const EdgeInsets.only(left: leftPaddingNavigationScreenWidgets),
            child: Text(
              welcomeText,
              style: TextStyle(fontSize: 20.0),
            ),
          ),
        ]),
      ),
    );
  }
}

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

// NavigationScreen data
const String cityName = 'Hulst';
const String welcomeText = 'Whe are happy to welcome you in our midieval city. Through the navigation bar on the left side you can pick an interest.';
final String navigationScreenCenterImage = 'assets/images/Top image.png';
const double leftPaddingNavigationScreenWidgets = 20;
final String navigationScreenBackground = 'assets/images/Background.png';

// NavigationRail properties


// NavigationRail Icons
final navigationScreenIcon = Icons.home_outlined;
final eventScreenIcon = Icons.event_available_outlined;
final parkingScreenIcon = Icons.local_parking_outlined;
final foodScreenIcon = Icons.fastfood_outlined;
final sosScreenIcon = Icons.medical_services_outlined;

// Color pallet
const colorPalletLight = Color.fromRGBO(192,215,188,1);
const colorPalletDark = Color.fromRGBO(23,79,83,0.8);
const colorPalletDarkButAndText = Color.fromRGBO(23,79,83,0.8);
const colorPalletLightBut = Color.fromRGBO(237,248,240,1);

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 inc...
Read more

Thinking & coding: the Custom Navigation icons

Image
Starting is always difficult because I am out of my think rhythm. Those older brains need to heat up for a while. A glass of wine sometimes helps ;-) Icons Today I want to bring the icons, which I used in my Figma prototype (which you can find here ), into my project. You can find what I programmed last time here . Since I actually had no idea how to get started, I started searching on Youtube. And there I got a very clear explanation via the channel of Reso Coder. The link to the corresponding video can be found at the bottom in the thank you section. I can therefore export my icons from Figma as SVG. Then I can have them mapped via the website Fluttericons.com for use in Flutter. A wonderful tool, especially for large libraries of icons. But it did'nt work for my icons that i exported out of Figma.  I have no idea why. For the moment i used standard material icons. Background image I exported the background of my prototype(Figma) to my project.  I got my background in a...
Read more