Created
September 30, 2020 23:59
-
-
Save Levi-Lesches/1a57a5926314bcc5de57c42cb19bcf6f to your computer and use it in GitHub Desktop.
A prototype of the credits page for RamLife
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import "package:flutter/material.dart"; | |
// 1. Create a Programmer class to store the right data | |
// 2. Create a ProgrammerWidget to represent the data | |
// 3. Create a CreditsPage widget to show all the credits | |
// Each one of these classes can be modified reasonably without breaking the other widgets. | |
// 1. The Programmer class defines all the data. | |
class Programmer { | |
// A String is plain text | |
// Final means the variable is never changing. | |
final String name; | |
final String imageName; | |
final String bio; | |
// This lets us "create" a new Programmer object with the right data. | |
Programmer({ | |
this.name, | |
this.imageName, | |
this.bio, | |
}); | |
} | |
// 2. A widget to represent a Programmer object. | |
class ProgrammerWidget extends StatelessWidget { | |
// The programmer to represent. | |
final Programmer programmer; | |
// Allows us to create a ProgrammerWidget with the right data. | |
ProgrammerWidget(this.programmer); | |
// Nicely represents a Programmer with other widgets. | |
Widget build(BuildContext context) { | |
return Column( | |
children: [ | |
// The image of the programmer | |
// This WOULD use programmer.imageName, but this is just the demo | |
CircleAvatar(child: FlutterLogo()), | |
// Some padding | |
SizedBox(height: 10), | |
// Another way to add padding | |
Padding( | |
padding: EdgeInsets.all(10), | |
child: Text(programmer.name), | |
), | |
// Puts the bio and the imageName in a row together | |
Row( | |
// Distributes the space evenly between the two text boxes | |
mainAxisAlignment: MainAxisAlignment.spaceEvenly, | |
children: [ | |
Text(programmer.bio), | |
Text(programmer.imageName), | |
] | |
) | |
] | |
); | |
} | |
} | |
// 3. The CreditsPage widget shows many ProgrammerWidgets together | |
// | |
// The page itself is also a widget -- everything is a widget! | |
class CreditsPage extends StatelessWidget { | |
Widget build(BuildContext context) { | |
return Scaffold( | |
appBar: AppBar(title: Text('Credits')), | |
body: ListView( // A scrollable list | |
children: [ | |
// This is a for loop INSIDE a widget | |
// | |
// For each programmer in the list, create a new ProgrammerWidget (with some padding). | |
// getProgrammers() is a function defined below. | |
for (Programmer programmer in getProgrammers()) | |
Padding( | |
padding: EdgeInsets.symmetric(vertical: 20), | |
child: ProgrammerWidget(programmer), | |
) | |
] | |
) | |
); | |
} | |
} | |
// A function to get all the programmers to credit. | |
// | |
// This function can do anything, like connect to the servers, read from a file, | |
// or read some hard-coded values in the app's code itself. | |
// | |
// Since this is a demo, it just returns a list with the same thing over and over. | |
List<Programmer> getProgrammers() { | |
return [ | |
Programmer( | |
name: "Levi", | |
imageName: "credits/levi.png", | |
bio: "He is cool", | |
), | |
Programmer( | |
name: "Levi", | |
imageName: "credits/levi.png", | |
bio: "He is cool", | |
), | |
Programmer( | |
name: "Levi", | |
imageName: "credits/levi.png", | |
bio: "He is cool", | |
), | |
Programmer( | |
name: "Levi", | |
imageName: "credits/levi.png", | |
bio: "He is cool", | |
), | |
]; | |
} | |
// The main function tells Dart what to do, similar to Arduino's setup and loop. | |
// | |
// Here, all we want to do is run an app (that uses Material Design) with the CreditsPage | |
// as the home page. | |
void main() { | |
runApp( | |
MaterialApp( | |
home: CreditsPage() | |
) | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment