I’ve learned a lot since my last entry, and it is all making very good sense. Since my last module with Angela I’ve become a bit more adapted to writing in Dart. I’m feeling pretty good about it. I suspect this is what I miss about being a student in conventional school. You’re introduced to something you want to know more about, you’re told to study that subject, you make notes that you can understand as you study, and you go over that for an hour a night until the test, you pass the test because it’s all so familiar, you get a good grade, you’re excited to tell your parents, and experience for the first time the pride in learning new things.
Before I look at my notes, I’m going to try to remember some of the new things that I think are important for you to remember.
- Start new functions with void. Like — void nameFunc () { //do something}; — remember the syntax, () and {};
- Variables can be called by it’s data type instead of calling out var use the data type to call it out — int = 12; — string = ‘Hello’; — remember the syntax = and close with ;
- Card widgets are formatted for a Icon leading horizontal box, use can make children [ ] within the widget that hold ListTile (), — ListTile widgets are followed by leading: property for Icons.icon, a title: property for Text(‘Some Text.’ style: TextStyle(fontFamily’Sans’),), — and a trailing: image or icon — wrap it all in a Padding() widget for some padding
- Images can be called using child: Image.Asset(‘images/name.png’)— with string interpolation you can use the $myVarName to pass in the data of the var — Image.Asset(‘images/$myVarName.png’),
- Stateful widgets are for functionality, stateless are for displaying content only — in the class page state method you want to call out your vars and functions — in the build method is where you hot reload your app and return a widget to begin the widget tree ie. return Center (),
- An Expanded() widget in a Row() is meant to take up the entire width of the Row — Use Expanded widget instead of container to fit to width of any size device
- FlatButton(), is used to wrap an object in a button. It needs to include onPressed(){ } to tell it what to do when you press the button. This is where you can check to see if it’s working with a print (‘Hello’), statement — you can’t really update the state of the button without putting setSate((){} inside of onPressed(){ } — setState tells the app to update what’s on the page when button is pressed.
- Import ‘dart:math’; at the very beginning of your code to use the math library, I used this so far to call a Random function to my variables — varName = Random().nextint(max) + 1; randomizes the image in the images/ asset folder according to a number from 1 – 6, so I replace the max with a 6 and + 1 because it counts from zero
I only looked at my notes when I started to forget around number 6, but writing down notes and writing it out for you in a blog really helps cement the knowledge in my brain. If I keep this up I’ll be a pretty resourceful developer. I’m excited to learn more, but I’m going to study the layout of this code some more and I hope that you’re excited to learn more as well, us beginners need to help each other. I’m happy to share this journey with you.
If you have any questions or comments leave them below, otherwise reach out to me on Instagram @kyleknob.
import 'package:flutter/material.dart';
import 'dart:math';
void main() {
return runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.red,
appBar: AppBar(
title: Text('Dicee'),
backgroundColor: Colors.red,
),
body: DicePage(),
),
),
);
}
class DicePage extends StatefulWidget {
@override
_DicePageState createState() => _DicePageState();
}
class _DicePageState extends State<DicePage> {
int leftDiceNumber = 1;
int rightDiceNumber = 2;
void diceChange (){
setState(() {
leftDiceNumber = Random().nextInt(6) + 1;
rightDiceNumber = Random().nextInt(6) + 1;
});
}
@override
Widget build(BuildContext context) {
return Center(
child: Row(
children: [
Expanded(
child: FlatButton(
onPressed: (){
diceChange();
},
child: Image.asset('images/dice$leftDiceNumber.png'
),
),
),
Expanded(
child: FlatButton(
onPressed: (){
diceChange();
},
child: Image.asset('images/dice$rightDiceNumber.png'
),
),
),
],
),
);
}
}
