如何讓FlutterGridView在點擊時改變顏色

我以前問過這個問題，但我沒有得到太多幫助。我使用 GridView.count 創建了一個 GridView；但是，我無法獲得一個單獨的容器來更改顏色。如果我單擊行中的任何容器，整行都會發生變化。我希望能夠在點擊單個容器時更改它的顏色，并在選中時在容器的右上角顯示復選標記。

(1)

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowtappedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: CustomCheckboxGrid(),
        ),
      ),
    );
  }
}

class CustomCheckboxGrid extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _CustomCheckboxGridState();
  }
}

class _CustomCheckboxGridState extends State<CustomCheckboxGrid> {
 
  
 int tapped_index = 0;

List card_names = [
  'Maintaining healthy relationships',
  'Being happier and more content in life',
  'Work life balance',
  'Personal Growth',
  'Stress',
  'Mental health',
];

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: GridView.builder(
      padding: const EdgeInsets.all(16),
      itemCount: card_names.length,
      itemBuilder: (BuildContext context, int index) {
        return buildCard(index);
      },
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
    ),
  );
}

Widget buildCard(int index) {
  bool tapped = index == tapped_index;
  String current_name = card_names[index];
  return GestureDetector(
    onTap: () {
      setState(() {
        print("Tapped index: ${index}");
        tapped_index = index;
      });
    },
    child: Stack(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(14),
          child: 
            //put your widget here!!!!!
            //-----------------------------------
            Card(
            color: tapped ? Colors.orange : Colors.white,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            child: Container(
              child: Center(child: Text(current_name)),
            ),
          ),
            //-----------------------------------
        ),
        Positioned(
          top: 14,
          right: 14,
          child: Offstage(
            offstage: !tapped,
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border.all(width: 2),
                  shape: BoxShape.circle),
              child: Icon(
                Icons.check,
                color: Colors.green,
              ),
            ),
          ),
        ),
      ],
    ),
  );
}
}

標籤：扑 镖 颤振布局 android-gridview

上一篇：FieldValue.arrayRemove()從firestore中的陣列中洗掉所有物件

下一篇：如何為孩子設定邊距