Lesson 6

🎯 Goal

Build True/False buttons on your own Training Page.

You’ll write the code yourself, using the team’s real code as your guide.

New ideas (just two):

• State is a value the page remembers, like bool climbed = false;.
• If you change state, you must tell Flutter to redraw: wrap it in setState(() { ... }). Forget this and the screen won’t update.

Task 0: Your page branch

You’ll keep working on this one branch for Lessons 6 to 9.

Do The Pull First Rule from Lesson 3.

Open lib/Training/TrainingPage.dart. Read the whole file. Find the heading LESSON 6: TRUE / FALSE. That’s where your code goes.

Task 1: Learn from the real app

Open Auton.dart (you know where it is!) and find the Climb checkbox.

In your doc, answer:

1. Which variable remembers whether Climb is on?

Task 2: Your first toggle

In TrainingPage.dart, add a variable with your other variables:

bool climbed = false;

Then add this under the Lesson 6 heading. Fill in the three blanks (____):

buildCheckBoxFull('Climbed?', ____, (bool value) {
  ____(() {
    ____ = value;
  });
}),

Hot restart (you added a variable). Tap it.

✅ Checkpoint: the checkbox switches on and off.

Commit: Lesson 6: add Climbed toggle

Task 3: Build your own button

buildCheckBoxFull is the team’s. Now make your own, from scratch, using a plain ElevatedButton.

The spec:

• It’s called Defense. It remembers a bool defense, starting false.
• When false, it’s red and says Defense: NO.
• When true, it’s green and says Defense: YES.
• Tapping it flips the value. (! means NOT: !true is false.)

Try for 10 minutes before you open the hint.

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: defense ? Colors.green : Colors.red,
  ),
  onPressed: () {
    setState(() {
      defense = !defense;
    });
  },
  child: Text(defense ? 'Defense: YES' : 'Defense: NO'),
),

✅ Checkpoint: it flips, changes color, and changes words.

Commit.

Task 4: Another toggle, and a total

1. Add a third toggle using buildCheckBoxFull: Left starting zone? (bool leftZone).
2. Write a function that counts how many of your three values are true:

int countYes() {
  // your code here
}

Use int, if, and ++ from Module 1. 3. Show it on the page with a Text: Yes answers: 2 (use $ and ${...}).

✅ Checkpoint: tap the toggles and the number changes every time.

Commit.

Task 5: Make it yours

Pick two and do them:

• The Defense button turns orange after you’ve tapped it more than 3 times.
• Add a message: All three! appears only when countYes() is 3.
• Add a Reset button that sets all three back to false.
• Change the Defense button’s shape or text size.

To complete this lesson

Paste into this lesson’s tab in your training doc (text, no screenshots):

1. Your answers to Task 1
2. The link to your last commit for this lesson
3. Your code for countYes()
4. Which two things did you pick in Task 5?