Flutter学习笔记：创建一个简单的选择背景颜色的程序

这个应用包括两个界面，主界面和皮肤选择界面。主界面中展示了一个皮肤，同时提供了一个按钮可以打开皮肤选择界面。皮肤选择界面包含三个按钮，用于选择不同的皮肤。当用户选择了新的皮肤后，主界面会刷新并展示所选择的皮肤。

代码如下所示

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
    
    
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
    
    
  String _selectedSkin = 'Blue';

  void _onSelectSkin(String skin) {
    
    
    setState(() {
    
    
      _selectedSkin = skin;
    });
  }

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Container(
        color: _getSelectedColor(),
        child: Center(
          child: ElevatedButton(
            onPressed: () {
    
    
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SkinSelectPage(onSelectSkin: _onSelectSkin)),
              );
            },
            child: Text(
              'Select Skin',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }

  Color _getSelectedColor() {
    
    
    switch (_selectedSkin) {
    
    
      case 'Blue':
        return Colors.blue;
      case 'Red':
        return Colors.red;
      case 'Green':
        return Colors.green;
      default:
        return Colors.blue;
    }
  }
}

class SkinSelectPage extends StatelessWidget {
    
    
  final Function(String) onSelectSkin;

  SkinSelectPage({
    
    Key? key, required this.onSelectSkin}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Skin'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
    
    
                onSelectSkin('Blue');
                Navigator.pop(context);
              },
              child: Text('Blue'),
            ),
            ElevatedButton(
              onPressed: () {
    
    
                onSelectSkin('Red');
                Navigator.pop(context);
              },
              child: Text('Red'),
            ),
            ElevatedButton(
              onPressed: () {
    
    
                onSelectSkin('Green');
                Navigator.pop(context);
              },
              child: Text('Green'),
            ),
          ],
        ),
      ),
    );
  }
}