I thought I knew a thing or two about functionality and how Dart code works until I took a weekend off of coding and came back to it. Once I tried to code using my memory of Cards and ListTiles I realized I needed more practice.
Practice Practice Practice
Coding isn’t as fun as playing guitar or skateboarding or something like that, since there’s no immediate reward. Well I suppose there is, it’s just not as immediate. What I’m trying to say is that when I’m coding it’s about the repetitiveness of it that will help me remember it, just like writing a song or doing a kickflip. My brain wants to speed through everything, but it’s the time and the work I put into it, just like everything else, that will allow me to become a better programmer.
Stateless and Stateful Widgets
I had an epiphany a moment ago when I coded a Magic 8 Ball app in Angela’s class about how Stateless and Stateful widgets interact. It looks as though the Stateless widget is where the Material App, AppBar, Scaffold and body: are held, but until now I didn’t realize that the body property holds the name of the Stateful widget. In the case of this Magic 8 Ball app, the body: property holds body: Ball(), the name of the Stateful widget and class I define to make the app function, or change state.
Class or Widget or Both?
It seems to me that the name of the widget is defined by using a class. I name my Stateful widget Ball and it changes the name of the state as well, for example:
class Ball extends StatefulWidget {
@override
_BallState createState() => _BallState();
}
class _BallState extends State<Ball> {
int ballNumber = 1;
@override
Widget build(BuildContext context) {
return Center(
It’s in between the class _BallState extends State<Ball> { curly braces that I define my programs variables and functions. Here, I created a variable called ballNumber and I set it to 1.
I am returning the rest of my apps body in the return Center(), portion of this Stateful widget. Which is loaded in my Stateless widget by just calling on the name of the Stateful class I titled Ball:
class BallPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightBlue,
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text(‘Ask Me Anything’),
),
body: Ball(),
);
}
}
The name of this Stateless widget is called BallPage, and a lot like how I call on my Stateful widget in my body property I do the same with my Stateless widget in the runApp==> Material App widget, like so:
void main() => runApp(
MaterialApp(
home: BallPage(),
),
);
I’m telling Dart, run this app that’s built with your MaterialApp framework and the contents of this app can be found in the following Stateless widget titled, BallPage. With your home: property you will find home: BallPage(), which makes sense when you analyze how each widget inherits the code preceding it.
So remember that the Stateless widget holds the body of your Stateful widget, and the Material App needs to load both of those by calling on the name of the Stateless widget you define with the home: property. Make sense? Maybe re-read that a few more times. It’s computer language, you begin to realize how meticulous computer languages are.
Stateless widgets hold no functionality and Stateful widgets do. Your Stateless widget needs to know about your Stateful widget with the body: property and your Stateful widget needs to return the Center or Container widget tree of the functional app you’re creating, got it?
import 'package:flutter/material.dart';
import 'dart:math';
void main() => runApp(
MaterialApp(
home: BallPage(),
),
);
class BallPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightBlue,
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text('Ask Me Anything'),
),
body: Ball(),
);
}
}
class Ball extends StatefulWidget {
@override
_BallState createState() => _BallState();
}
class _BallState extends State<Ball> {
int ballNumber = 1;
@override
Widget build(BuildContext context) {
return Center(
child: FlatButton(
onPressed: () {
setState(() {
ballNumber = Random().nextInt(5) + 1;
});
print(ballNumber);
},
child: Image.asset('images/ball$ballNumber.png'),
),
);
}
}
If you have any questions leave a comment below or reach out to me on instagram @kyleknob
