Flutter开发：多容器颜色状态存储与单个容器识别技术求助

Hey there! Let's break down your problems and solve them one by one. I'll cover both storing color states and managing multiple containers effectively.

1. Storing Color State to SharedPreferences or Firestore #

First, let's handle persisting your container color states. Since Color objects can't be stored directly, we'll convert them to their integer values (via Color.value) which are easy to save and retrieve.

Option A: SharedPreferences (Local Storage) #

First, add the shared_preferences package to your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2

Then, create helper methods to handle saving/loading:

import 'package:shared_preferences/shared_preferences.dart';
import 'dart:convert';

// Save a single container's color state
Future<void> saveContainerColor(String containerId, Color? color) async {
  final prefs = await SharedPreferences.getInstance();
  // Store color as its integer value, or -1 for null state
  await prefs.setInt('container_$containerId', color?.value ?? -1);
}

// Load a single container's color state
Future<Color?> loadContainerColor(String containerId) async {
  final prefs = await SharedPreferences.getInstance();
  final colorValue = prefs.getInt('container_$containerId');
  return colorValue == -1 ? null : Color(colorValue);
}

// Save all container states at once (better for bulk operations)
Future<void> saveAllContainerColors(Map<String, Color?> colorMap) async {
  final prefs = await SharedPreferences.getInstance();
  // Convert map to JSON string since SharedPreferences doesn't support direct map storage
  final jsonString = jsonEncode(colorMap.map((key, value) => MapEntry(key, value?.value ?? -1)));
  await prefs.setString('all_containers', jsonString);
}

Future<Map<String, Color?>> loadAllContainerColors() async {
  final prefs = await SharedPreferences.getInstance();
  final jsonString = prefs.getString('all_containers');
  if (jsonString == null) return {};
  final jsonMap = jsonDecode(jsonString) as Map<String, dynamic>;
  return jsonMap.map((key, value) => MapEntry(key, value == -1 ? null : Color(value as int)));
}

Option B: Firestore (Cloud Storage for User-Specific Data) #

First, add cloud_firestore and firebase_auth (to link states to user accounts) to your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  cloud_firestore: ^4.15.0
  firebase_auth: ^4.17.0

Then, implement save/load methods tied to the current user:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

// Save a single container's color to Firestore
Future<void> saveContainerColorToFirestore(String containerId, Color? color) async {
  final user = FirebaseAuth.instance.currentUser;
  if (user == null) return; // Handle unauthenticated user case

  await FirebaseFirestore.instance
      .collection('users')
      .doc(user.uid)
      .collection('container_states')
      .doc(containerId)
      .set({'colorValue': color?.value});
}

// Load a single container's color from Firestore
Future<Color?> loadContainerColorFromFirestore(String containerId) async {
  final user = FirebaseAuth.instance.currentUser;
  if (user == null) return null;

  final doc = await FirebaseFirestore.instance
      .collection('users')
      .doc(user.uid)
      .collection('container_states')
      .doc(containerId)
      .get();

  if (!doc.exists) return null;
  final colorValue = doc.data()?['colorValue'] as int?;
  return colorValue != null ? Color(colorValue) : null;
}

// Save all container states in one batch operation
Future<void> saveAllContainersToFirestore(Map<String, Color?> colorMap) async {
  final user = FirebaseAuth.instance.currentUser;
  if (user == null) return;

  final batch = FirebaseFirestore.instance.batch();
  colorMap.forEach((containerId, color) {
    final docRef = FirebaseFirestore.instance
        .collection('users')
        .doc(user.uid)
        .collection('container_states')
        .doc(containerId);
    batch.set(docRef, {'colorValue': color?.value}, SetOptions(merge: true));
  });
  await batch.commit();
}

2. Managing Multiple Containers #

Instead of using a single _color variable, we'll use a Map<String, Color?> where each key is a unique ID for your container. This lets you track each container's state individually.

Here's a complete example combining multiple containers with SharedPreferences:

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:convert';

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

  @override
  State<ContainerManagerScreen> createState() => _ContainerManagerScreenState();
}

class _ContainerManagerScreenState extends State<ContainerManagerScreen> {
  // Map to track each container's color state (key = unique container ID)
  late Map<String, Color?> _containerColors;
  final double _height = 800; // Replace with your actual height logic

  @override
  void initState() {
    super.initState();
    _loadInitialStates();
  }

  Future<void> _loadInitialStates() async {
    final loadedMap = await loadAllContainerColors();
    setState(() {
      // Initialize with default states if no saved data exists
      _containerColors = loadedMap.isNotEmpty 
          ? loadedMap 
          : {
              'container_1': null,
              'container_2': null,
              'container_3': null,
              // Add more containers as needed
            };
    });
  }

  // Handle single tap (toggle blue color)
  void _handleSingleTap(String containerId) {
    setState(() {
      if (_containerColors[containerId] == null) {
        _containerColors[containerId] = Colors.blue;
      } else if (_containerColors[containerId] == Colors.blue) {
        _containerColors[containerId] = null;
      }
    });
    // Save the updated state immediately
    saveContainerColor(containerId, _containerColors[containerId]);
  }

  // Handle double tap (toggle red color)
  void _handleDoubleTap(String containerId) {
    setState(() {
      if (_containerColors[containerId] == null) {
        _containerColors[containerId] = Colors.red;
      } else if (_containerColors[containerId] == Colors.red) {
        _containerColors[containerId] = null;
      }
    });
    // Save the updated state immediately
    saveContainerColor(containerId, _containerColors[containerId]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Container Manager')),
      body: Column(
        children: _containerColors.entries.map((entry) {
          final containerId = entry.key;
          return InkWell(
            onTap: () => _handleSingleTap(containerId),
            onDoubleTap: () => _handleDoubleTap(containerId),
            child: Container(
              height: _height * 0.04,
              margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
              decoration: BoxDecoration(
                color: entry.value,
                border: Border.all(color: Colors.grey), // Add border for visibility when no color
              ),
              child: Center(child: Text('Container ${containerId.split('_').last}')),
            ),
          );
        }).toList(),
      ),
    );
  }

  // Reuse helper methods here
  Future<void> saveContainerColor(String containerId, Color? color) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setInt('container_$containerId', color?.value ?? -1);
  }

  Future<Map<String, Color?>> loadAllContainerColors() async {
    final prefs = await SharedPreferences.getInstance();
    final jsonString = prefs.getString('all_containers');
    if (jsonString == null) return {};
    final jsonMap = jsonDecode(jsonString) as Map<String, dynamic>;
    return jsonMap.map((key, value) => MapEntry(key, value == -1 ? null : Color(value as int)));
  }
}

Key Notes: #

• Use unique IDs for each container (like container_1, container_2) to avoid state conflicts.
• For Firestore, ensure your security rules restrict users to only access their own data.
• If you have a large number of containers, consider saving all states at once (e.g., on a button press) instead of on every tap to reduce I/O overhead.

内容的提问来源于stack exchange，提问作者Doğukan Baybars