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.
 |  |
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), ), ), ], ), ), ], ), ), ), ); } } |
Comments
Post a Comment