Flutter에서 여러 버튼 중 하나의 버튼 색상을 변경하는 방법은 무엇입니까?

Codeabiswas

저는 Dart와 Flutter 프레임 워크를 처음 사용합니다. 현재 25 개의 버튼으로 채워진 GridView가 있습니다. 기본적으로 각 버튼에는 주황색 배경색이 있습니다. 그러나 사용자에게 아무 버튼이나 길게 누를 수있는 옵션을 제공하고 싶습니다. 그러면 PopUpMenu가 표시되어 버튼에 대해 다른 색상을 선택할 수있는 옵션을 제공합니다. 다음은 내가 시도한 두 가지입니다.

  1. 색상을 변경하는 전역 변수를 설정합니다. 그러나 상태를 변경하면 모든 버튼의 색상이 변경됩니다 (선택한 버튼의 색상 만 변경하고 싶습니다).
  2. 버튼의 인스턴스화를 통해 지역 변수를 전달하고 해당 변수를 PopUpMenu에 전달합니다. 그러나 이것은 버튼에 대한 어떤 것도 변경하지 않습니다.

이 문제를 해결하려면 어떻게해야합니까? 도움을 드리기 위해 아래 코드 스 니펫을 포함하고 있습니다. 이 코드는 # 2가 구현 된 방법을 나타냅니다.

25 버튼 인스턴스화 :

    // Random number generator
    var _randGen = new Random();

    //List of maze cards
    List<Widget> mazeCards = new List();

    // Generate cards until it has 25 cards within the list
    while(mazeCards.length != 25)
    {

      // Get the index
      var _currIndex = _randGen.nextInt(words.length);
      // Add the card to the list
      var _cardColor = Colors.orange;
      mazeCards.add(createCard(words[_currIndex], _cardColor));

    }

createCard 메소드 :

  Widget createCard(String someString, Color _cardColor)
  {
    return GestureDetector(
          onTapDown: _storePosition,
          child: Container(
            padding: EdgeInsets.all(8.0),
            child:
              _createButton(someString, _cardColor)
          ),
    );
  }

createButton 메서드 :

  Widget _createButton(String someString, Color _cardColor)
  {

    Widget newButton = MaterialButton(
                padding: EdgeInsets.all(50.0),
                color: _cardColor,
                onPressed: () => _printButtonText(someString),
                onLongPress: () {
                  cardOptionsMenu(_cardColor);
                },
                textTheme: ButtonTextTheme.primary,
                 //_someColor(),
                child: Text(someString)
    );

    return newButton; 
  }

cardOptionsMenu 메소드 :

void cardOptionsMenu(Color _cardColor)
  {

    final RenderBox overlay = Overlay.of(context).context.findRenderObject(); 
    showMenu(
      context: context,
      ...
    )
    .then<void>((CardOptionEnum cardOption) {
      if (cardOption == null) return;
      else{
        switch (cardOption)
          {
            case CardOptionEnum.makeBlackCard:
              setState(() {
                _cardColor = Colors.black;
              });
              break;
            case CardOptionEnum.makeBlueCard:
              setState(() {
                _cardColor = Colors.blue;
              });
              break;
            case CardOptionEnum.makeRedCard:
              setState(() {
                _cardColor = Colors.red;
              });
              break;
            case CardOptionEnum.makeYellowCard:
              setState(() {
                _cardColor = Colors.yellow;

              });
              break;
            case CardOptionEnum.changeWord:

              break;
          }
      }
    });
  }
나빈 아비디

그림

List<int> items = [];
  List<Color> colors = [];

  @override
  void initState() {
    super.initState();
    items = List.generate(25, (ind) => ind).toList();
    colors = List.generate(25, (ind) => Colors.orange).toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        itemCount: items.length,
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        itemBuilder: (con, ind) {
          return InkWell(
              child: Card(child: Text('${items[ind]}',
                                     style:TextStyle(color:Colors.white),
                                     textAlign:TextAlign.center), color: colors[ind]),
              onTap: () {
                changeColor(ind);
              });
        });
  }

  void changeColor(index) {
    showDialog(
        context: context,
        builder: (con) {
          return AlertDialog(
            title: Text('Choose a color !'),
            content: Column(mainAxisSize: MainAxisSize.min, children: [
              ListTile(
                  title: Text('Blue'),
                  onTap: () {
                    Navigator.of(con).pop();
                    changeState(index, Colors.blue);
                  }),
              ListTile(
                  title: Text('Red'),
                  onTap: () {
                    Navigator.of(con).pop();
                    changeState(index, Colors.red);
                  }),
              ListTile(
                  title: Text('Green'),
                  onTap: () {
                    Navigator.of(con).pop();
                    changeState(index, Colors.green);
                  })
            ]),
          );
        });
  }

  void changeState(index, color) {
    setState(() {
      colors[index] = color;
    });
  }

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Android에서 버튼 색상을 변경하는 방법은 무엇입니까?

분류에서Dev

Flutter에서 버튼 클릭시 카드 뷰의 색상을 변경하는 방법은 무엇입니까?

분류에서Dev

여러 버튼에서 버튼 하나의 색상을 변경하는 방법 Vue

분류에서Dev

하나의 버튼을 클릭하여 여러 가지 .innerhtml을 변경하는 방법은 무엇입니까?

분류에서Dev

버튼을 다시 클릭 할 때 여기서 핸들러를 중지하는 방법은 무엇입니까?

분류에서Dev

제약 조건으로 여러 버튼을 중앙에 배치하는 방법은 무엇입니까?

분류에서Dev

R Shiny에서 상자의 축소 / 확장 버튼 색상을 변경하는 방법은 무엇입니까?

분류에서Dev

버튼을 클릭하여 SVG 요소의 색상을 변경하는 방법은 무엇입니까?

분류에서Dev

Flutter의 여러 버튼에서 하나의 버튼 색상 변경

분류에서Dev

여러 버튼을 단일 IBAction으로-이전에 탭한 버튼의 배경을 변경하는 방법은 무엇입니까?

분류에서Dev

여러 선택 버튼 중 변경된 선택 버튼을 얻는 방법은 무엇입니까?

분류에서Dev

Flutter의 페이지에있는 버튼을 클릭하여 BottomNavigationBar의 페이지 중 하나로 이동하는 방법은 무엇입니까?

분류에서Dev

Unity에서 버튼의 텍스트 및 이미지 색상을 변경하는 방법은 무엇입니까?

분류에서Dev

React Native에서 클릭 할 때 각 버튼의 색상을 변경하는 방법은 무엇입니까?

분류에서Dev

onsenui에서 선택한 "세그먼트 버튼"의 색상을 변경하는 방법은 무엇입니까?

분류에서Dev

UIScrollView의 중앙에 버튼을 사용하는 방법은 무엇입니까?

분류에서Dev

버튼을 사용하여 Bootstrap에서 캐 러셀을 탐색하는 방법은 무엇입니까?

분류에서Dev

OpenGL을 사용하여 중앙의 버튼에 사각형을 그리는 방법은 무엇입니까?

분류에서Dev

메서드를 사용하여 버튼의 on_release 기능을 변경하는 방법은 무엇입니까?

분류에서Dev

vuejs에서 모든 필드를 채운 후 버튼 색상을 변경하는 방법은 무엇입니까?

분류에서Dev

자바 스크립트에서 버튼 색상을 변경하는 방법은 무엇입니까?

분류에서Dev

Yaru 테마에서 버튼 색상을 변경하는 방법은 무엇입니까?

분류에서Dev

버튼을 클릭하여 ImageView에서 사진을 변경하는 방법은 무엇입니까?

분류에서Dev

Flutter : ListView에서 버튼을 아래쪽 중앙에 배치하는 방법은 무엇입니까?

분류에서Dev

ListPreference 버튼 색상을 변경하는 방법은 무엇입니까?

분류에서Dev

MVC의 하나의 컨트롤러에서 다중보기 버튼 (제출)에 대한 작업을 만드는 방법은 무엇입니까?

분류에서Dev

iOS에서 버튼 모양을 변경하는 방법은 무엇입니까?

분류에서Dev

Android에서 여러 스레드에 여러 버튼을 사용하는 방법은 무엇입니까?

분류에서Dev

여러 버튼을 클릭 할 때 대화 상자 내에서 TextView의 텍스트를 변경하는 방법은 무엇입니까? kotlin 사용

Related 관련 기사

  1. 1

    Android에서 버튼 색상을 변경하는 방법은 무엇입니까?

  2. 2

    Flutter에서 버튼 클릭시 카드 뷰의 색상을 변경하는 방법은 무엇입니까?

  3. 3

    여러 버튼에서 버튼 하나의 색상을 변경하는 방법 Vue

  4. 4

    하나의 버튼을 클릭하여 여러 가지 .innerhtml을 변경하는 방법은 무엇입니까?

  5. 5

    버튼을 다시 클릭 할 때 여기서 핸들러를 중지하는 방법은 무엇입니까?

  6. 6

    제약 조건으로 여러 버튼을 중앙에 배치하는 방법은 무엇입니까?

  7. 7

    R Shiny에서 상자의 축소 / 확장 버튼 색상을 변경하는 방법은 무엇입니까?

  8. 8

    버튼을 클릭하여 SVG 요소의 색상을 변경하는 방법은 무엇입니까?

  9. 9

    Flutter의 여러 버튼에서 하나의 버튼 색상 변경

  10. 10

    여러 버튼을 단일 IBAction으로-이전에 탭한 버튼의 배경을 변경하는 방법은 무엇입니까?

  11. 11

    여러 선택 버튼 중 변경된 선택 버튼을 얻는 방법은 무엇입니까?

  12. 12

    Flutter의 페이지에있는 버튼을 클릭하여 BottomNavigationBar의 페이지 중 하나로 이동하는 방법은 무엇입니까?

  13. 13

    Unity에서 버튼의 텍스트 및 이미지 색상을 변경하는 방법은 무엇입니까?

  14. 14

    React Native에서 클릭 할 때 각 버튼의 색상을 변경하는 방법은 무엇입니까?

  15. 15

    onsenui에서 선택한 "세그먼트 버튼"의 색상을 변경하는 방법은 무엇입니까?

  16. 16

    UIScrollView의 중앙에 버튼을 사용하는 방법은 무엇입니까?

  17. 17

    버튼을 사용하여 Bootstrap에서 캐 러셀을 탐색하는 방법은 무엇입니까?

  18. 18

    OpenGL을 사용하여 중앙의 버튼에 사각형을 그리는 방법은 무엇입니까?

  19. 19

    메서드를 사용하여 버튼의 on_release 기능을 변경하는 방법은 무엇입니까?

  20. 20

    vuejs에서 모든 필드를 채운 후 버튼 색상을 변경하는 방법은 무엇입니까?

  21. 21

    자바 스크립트에서 버튼 색상을 변경하는 방법은 무엇입니까?

  22. 22

    Yaru 테마에서 버튼 색상을 변경하는 방법은 무엇입니까?

  23. 23

    버튼을 클릭하여 ImageView에서 사진을 변경하는 방법은 무엇입니까?

  24. 24

    Flutter : ListView에서 버튼을 아래쪽 중앙에 배치하는 방법은 무엇입니까?

  25. 25

    ListPreference 버튼 색상을 변경하는 방법은 무엇입니까?

  26. 26

    MVC의 하나의 컨트롤러에서 다중보기 버튼 (제출)에 대한 작업을 만드는 방법은 무엇입니까?

  27. 27

    iOS에서 버튼 모양을 변경하는 방법은 무엇입니까?

  28. 28

    Android에서 여러 스레드에 여러 버튼을 사용하는 방법은 무엇입니까?

  29. 29

    여러 버튼을 클릭 할 때 대화 상자 내에서 TextView의 텍스트를 변경하는 방법은 무엇입니까? kotlin 사용

뜨겁다태그

보관