I haven’t written about programming in a while, and it’s not because I’m not studying, it’s because I’m a crazy person who has a hard time putting together a blog post sometimes. So I wait until the moment strikes me, and today that moment is around lunch time at work.
I left off with my explanation of Dart conditionals, methods and classes, which to be honest I still need to look at to get a refresher. I started taking the next module Angela has that builds the BMI calculator, and that taught me some good stuff about customizing themes.
I got frustrated with this lesson at the end because I couldn’t get the BMI to calculate right. I moved on though and took all the other stuff that I learned in that lesson with me.
Constants Are For Style
Constants are a great way to style everything on your page and refer to it one place. It’s like CSS sheet for your HTML file. For example:
const kNumberStyle = TextStyle(
fontSize: 50.0,
fontWeight: FontWeight.w900,
color: Colors.white,
);
You just use the key word const nameOfConst = What your styling, TextStyle, Color, Container height, etc. You use the name of the const instead of the entire TextStyle widget. I like that little shortcut, it’s great to use to build container widgets that have the same parameters.
If Else Makeover
colour: selectedGender == Gender.male ? kActiveCardColor : kInactiveCardColor,
The colour is of Type color. This reads like this: Is the selcetedGender equal to male? Then use constant kActiveCardColor : other wise use kInactiveCardColor,
This is a simpler way to do an if (something == something){do something} else {do this}
Enumerations or Enums
Enums let you make up your own data type for instance:
Gender selectedGender;
The enum is of type Gender and set it to selectedGender;
The ReusableCard class
import ‘package:flutter/material.dart’;
class ReusableCard extends StatelessWidget {
ReusableCard({@required this.colour, this.cardChild, this.onPress});
final Color colour;
final cardChild;
final Function onPress;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPress,
child: Container(
child: cardChild,
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
color: colour,
borderRadius: BorderRadius.circular(10.0),
)
),
);
}
}
You can build out a dart file to create a class of a Widget tree you want to continue to use on your main screen. Here ReusableCard is created as a class and an object that requires a color, a cardChild and a function. The cardChild is a dynamic object that holds the Icon and the label below it in a container. I specify what’s in that cardChild on the input page like so:
cardChild: IconContent(icon: FontAwesomeIcons.venus, label: ‘FEMALE’,),
Pretty much anytime I create a ResusableCard on the input page I can put what I need in that cardChild:
Expanded(child: ReusableCard(
colour: kActiveCardColor,
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(‘AGE’,
style: kLabelTextStyle),
Text(age.toString(),
style: kNumberStyle,
),
The rest of the functionality of the app doesn’t come to any use for me, like adding a Slider or adding buttons that increase or decrease a number, all good stuff, but not useful for what I want to build. Like I said I got too frustrated with it cause I couldn’t get it to calculate correctly, I downloaded the completed project but got to lazy to compare mine with hers. I get it, that’s not the attitude I should have learning a new skill, but I’ve got building to do!
Leave a comment below or reach out to me on Instagram @kyleknob
