Thinking & coding: Building the UI EventCard to display in the Listview.

This session I'm building a UI part. The "EventCard".


There are 2 big reasons why I am now working on a UI part. The first reason is because this part is a logical consequence of the previous session, but also for motivation. Why motivation?


The big advantage with UI construction is that you see noticeably strong progress with almost every new program line. Especially with the "hot reload" from Flutter. And you don't have that with the underlying logic code. And maybe this is just me, but I need that view of progress. I can understand that maybe for a seasoned SE this is not that important but for a newbie like me it is. Finally, don't forget that I have study work for almost every line of code. Because I don't want to just write a practice app, but a real production app. So I constantly ask myself whether I am using the correct programming method, and whether it can be more efficient.


To start, I create a new folder in the project tree 'screen widgets'. It will contain all the libraries that will graphically support the screens, and that I want to reuse or need to be able to adapt to the wishes of the customers. The new dart file is called event_card. Below in the prototype you can see again what the EventCards should look like.

Left the prototype, right the result for the moment in code.




In the meantime I show the card to be built in an unused screen. This way I can follow what I am programming in real time.

The code and my comments during the build.
 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
import 'package:flutter/material.dart';
import 'package:my_first_production/owner_data/owner_data.dart';
import 'package:my_first_production/owner_data/style.dart';

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        //the transparant card with border
        height: 190.0,
        width: 280.0,
        decoration: BoxDecoration(
            color: Colors.transparent,
            borderRadius: BorderRadius.circular(50.0),
            border: Border.all(
              color: colorPalletDark,
              width: 3.0,
            )),
        child: Padding(
          //aligning the left side in the card
          padding: const EdgeInsets.only(left: 12.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(height: 2.0),
              Text(
                'VestRock', //to be replaced with backend data
                style: CardTitleTextStyle,
              ),
              SizedBox(
                height: 15.0,
              ),
              Row(
                children: [
                  Text('datum: 24/08/2021',
                      style: CardTextStyle), //to be replaced with backend data
                  SizedBox(
                    width: 50.0,
                  ),
                  Icon(Icons.info),
                ],
              ),
              SizedBox(
                height: 15.0,
              ),
              Expanded(
                //use expanded to solve overflow
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                        height: 80.0,
                        width: 145.0,
                        child: Text(
                            'Music festival on the Vest in the old town.', //to be replaced with backend data
                            style: CardTextStyle)),
                    SizedBox(
                      width: 7.0,
                      height: 80.0,
                    ),
                    Container(
                      height: 120.0,
                      width: 110.0,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(testImage),
                            fit: BoxFit.none),
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(50.0),
                            bottomRight: Radius.circular(47.0)),
                        //border: Border.all(color: Colors.blueAccent, width: 2.0),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}



While building this card I ran into a few problems. Like everyone in the beginning, I think, my column overflow.
Another problem is the placement of the photo, it should be in the lower right corner of the card, but positioning it precisely isn't that easy. And again the overflow errors. I have solved the problem by wrapping the last Row() in my card with an Expanded(). Then it was some tweaking with SizedBoxes() to get the perfect position.
Also the Icon must be replaced with a custom Icon.

I want to say thanks to: 
The Retroportal Studio Youtube Channel for the videos on the basic layout widgets,
The NetNinja Youtube Channel for the explanation on the "ListVieuw.builder"
Max Weber for the support since day 1 in queeste.


C U all next time, then i will link my card to the listview.builder and to the backend data. Dont forget to leave a comment, with your thoughts on this artikle.

Do, believe and be happy,

Stefaan







Comments

Popular posts from this blog

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

Software developer yes, but where to begin?

Thinking & coding: the Custom Navigation icons