A prototype of the credits page for RamLife

credits.dart

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()
    )
  );
}