नमस्ते मैं स्पंदन में एक नौसिखिया हूँ। यहाँ मैंने एक कॉलम के अंदर दो पंक्तियाँ बनाई हैं जहाँ कुछ बटन पहली पंक्ति में हैं और कुछ दूसरी पंक्ति में हैं। मैं उस बटन का रंग बदलना चाहता हूं जिसे मैं दबाता हूं लेकिन जब मैं बटन दबाता हूं तो उस विशेष पंक्ति के सभी बटन रंग बदलते हैं। यहाँ मेरा कोड है।

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Color color, color2;
  Color changeColor() {
    if (color == null) {
      return Colors.red;
    }
    return color;
  }

  Color changeColor2() {
    if (color2 == null) {
      return Colors.blue;
    }
    return color2;
  }

  Widget buttons(String s1, String s2) {
    return Column(
      children: [
        FlatButton(
          minWidth: 30.0,
          color: changeColor(),
          child: Text(s1),
          onPressed: () {
            setState(() {
              color = Colors.green;
            });
          },
        ),
        FlatButton(
          minWidth: 30.0,
          color: changeColor2(),
          child: Text(s2),
          onPressed: () {
            setState(() {
              color2 = Colors.yellow;
            });
          },
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Row(
        children: [
          buttons('a', 'b'),
          buttons('c', 'd'),
          buttons('e', 'f'),
          buttons('g', 'h'),
          buttons('i', 'j'),
          buttons('k', 'l'),
        ],
      ),
    );
  }
}

मुझे केवल उस बटन का रंग बदलने के लिए क्या करना चाहिए जिसे मैं दबाता हूं, कोई भी कोड नमूना अच्छा होगा

2
Viraj D 24 अक्टूबर 2020, 20:31
मेरे कोड को कॉपी पेस्ट करें इसका विश्लेषण करें और आपको समझ में आ जाएगा कि क्या हो रहा है,
 – 
man of knowledge
24 अक्टूबर 2020, 21:01
मैंने आपके कोड में हेरफेर किया है, इसलिए इसे समझना आसान होगा।
 – 
man of knowledge
24 अक्टूबर 2020, 21:03

2 जवाब

सबसे बढ़िया उत्तर

एक वर्ग बनाएं ButtonColor जो एक विशिष्ट बटन के पाठ और रंग का प्रबंधन करेगा जैसे:

class ButtonColor {
  Color color;
  String text;

  ButtonColor(this.color, this.text);
}

फिर, बटनों की एक सूची बनाएं और उन्हें column पर भेज दें।

पूर्ण उदाहरण:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class ButtonColor {
  Color color;
  String text;

  ButtonColor(this.color, this.text);
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Widget buttons(ButtonColor s1, ButtonColor s2) {
    return Column(
      children: [
        FlatButton(
          key: ValueKey(s1),
          minWidth: 30.0,
          color: s1.color,
          child: Text(s1.text),
          onPressed: () {
            setState(() {
              s1.color = Colors.green;
            });
          },
        ),
        FlatButton(
          key: ValueKey(s2),
          minWidth: 30.0,
          color: s2.color,
          child: Text(s2.text),
          onPressed: () {
            setState(() {
              s2.color = Colors.yellow;
            });
          },
        )
      ],
    );
  }

  List<ButtonColor> _buttonList = [
    ButtonColor(Colors.red, 'a'),
    ButtonColor(Colors.blue, 'b'),
    ButtonColor(Colors.red, 'c'),
    ButtonColor(Colors.blue, 'd'),
    ButtonColor(Colors.red, 'e'),
    ButtonColor(Colors.blue, 'f'),
    ButtonColor(Colors.red, 'g'),
    ButtonColor(Colors.blue, 'h'),
    ButtonColor(Colors.red, 'i'),
    ButtonColor(Colors.blue, 'j'),
    ButtonColor(Colors.red, 'k'),
    ButtonColor(Colors.blue, 'l'),
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Row(
        children: [
          buttons(_buttonList[0], _buttonList[1]),
          buttons(_buttonList[2], _buttonList[3]),
          buttons(_buttonList[4], _buttonList[5]),
          buttons(_buttonList[6], _buttonList[7]),
          buttons(_buttonList[8], _buttonList[9]),
          buttons(_buttonList[10], _buttonList[11]),
        ],
      ),
    );
  }
}
1
Jitesh Mohite 24 अक्टूबर 2020, 21:42
धन्यवाद, यह वह उत्तर था जिसे मैं ढूंढ रहा था, मैंने शुरुआत में चाबियों का भी उपयोग किया लेकिन यह काम नहीं किया क्या आप मुझे अपनी विधि समझा सकते हैं? क्या कोई ब्लॉग या ट्यूटोरियल है जिसे आप चाबियों का उपयोग करने के बारे में सुझाते हैं क्योंकि वे मुझे थोड़ा भ्रमित कर रहे हैं?
 – 
Viraj D
24 अक्टूबर 2020, 22:50

highlightColor प्रॉपर्टी का उपयोग RaisedButton में करें यदि आप चाहते हैं कि बटन दबाए गए राज्य के लिए रंग बदल दे।

RaisedButton(
          onPressed: () {},
          highlightColor: YOUR_COLOR,
          color: IDLE_STATE_COLOR,
        ),
0
Ashok 24 अक्टूबर 2020, 20:53
उत्तर देने के लिए धन्यवाद लेकिन highlightColor स्थायी रूप से नहीं रहता है, highlightColor केवल कुछ ही समय के लिए दिखाई देता है, इसलिए शायद यह वह उत्तर नहीं है जिसकी मुझे तलाश है
 – 
Viraj D
24 अक्टूबर 2020, 21:15