Day 4 Mini-Project Solution: Interactive "Settings" Page

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SettingsPage(),
    );
  }
}

class SettingsPage extends StatefulWidget {
  const SettingsPage({super.key});

  @override
  State<SettingsPage> createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  // State variables to hold the values of our interactive widgets
  String _username = '';
  bool _notificationsEnabled = false;
  bool _agreedToTerms = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Settings"),
        backgroundColor: Colors.teal,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            // TextField for username input
            TextField(
              decoration: const InputDecoration(
                labelText: 'Username',
                border: OutlineInputBorder(),
              ),
              // onChanged is called every time the text changes
              onChanged: (value) {
                setState(() {
                  _username = value;
                  // We print to the console to see the change happen in real-time
                  print('Username changed to: $_username');
                });
              },
            ),
            const SizedBox(height: 24),

            // ListTile provides nice formatting for a row with a Switch
            ListTile(
              title: const Text('Enable Notifications'),
              trailing: Switch(
                value: _notificationsEnabled,
                onChanged: (value) {
                  // setState is called to rebuild the widget with the new value
                  setState(() {
                    _notificationsEnabled = value;
                    print('Notifications enabled: $_notificationsEnabled');
                  });
                },
              ),
            ),

            // ListTile for the Checkbox
            ListTile(
              title: const Text('I agree to the terms and conditions'),
              leading: Checkbox(
                value: _agreedToTerms,
                onChanged: (value) {
                  setState(() {
                    // The value can be null, so we use ?? to provide a default (false)
                    _agreedToTerms = value ?? false;
                    print('Agreed to terms: $_agreedToTerms');
                  });
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}