목록 위젯 상태가 Flutter에서 StatefulBuilder로 업데이트되지 않습니다.

Nov 29 2020

내 질문은 setstate가 statefulbuilder 및 컨테이너의 색상을 업데이트하려는 위젯 목록에서 작동하지 않는다는 것입니다. 버튼의 색상이 업데이트되고 있습니다. 문제가 무엇인지 잘 모르겠습니다.

 Color currentColor = Colors.grey;
 void changecolor(Color color) {
   setState(() {
   currentColor = color;
   });
 }
 List<Widget> list = [];
 @override
Widget build(BuildContext context) {
   return Container(
   child: Stack(
       children: [
         Container(
          height: MediaQuery.of(context).size.height,
           width: MediaQuery.of(context).size.width,
       ),
         Positioned(
            right: 50,
          top: 50,
          child: RaisedButton(
            elevation: 3.0,
             onPressed: () {
              showDialog(
                context: context,
                 builder: (BuildContext context) {
                   return AlertDialog(
                     titlePadding: const EdgeInsets.all(0.0),
                    contentPadding: const EdgeInsets.all           (0.0),
                      content: SingleChildScrollView(
                       child: MaterialPicker(
                        pickerColor: currentColor,
                        onColorChanged: changecolor,
                        enableLabel: true,
                      ),
                   ),
                  );
              },
             );
          },
          child: const Text('Change me'),
          color: currentColor,
          
        ),
      ),
      ...list,
      Positioned(
        left: 50,
        top: 50,
        child: RaisedButton(
          child: Text(
            'Add another Color Sticker',
            style: TextStyle(fontSize: 10),
            ),
            onPressed: () {
               setState(
                () {
                 list.add(
                  StatefulBuilder(
                      builder: (BuildContext context,                     StateSetter setState) {
                         return Positioned(
                           left: 100,
                            top: 100,
                           child: Container(
                             color: currentColor,
                              height: 100,
                             width: 100,
                           ),
                          );
                       },
                     ),
                   );
                 },
               );
             },
            ),
          ),
       ],
      ),
    );

누구 든지이 문제로 나를 도울 수 있습니까? 왜 컨테이너의 색상을 업데이트하지 않는지 이해할 수 없습니다. 미리 감사드립니다.

답변

1 chunhunghan Nov 30 2020 at 01:18

당신은 아래에 붙여 넣기를 실행 전체 코드를 복사 할 수 있습니다
이 경우에, 당신은 사용할 수 있습니다 ValueNotifier<Color>ValueListenableBuilder
코드를

ValueNotifier<Color> currentColor = ValueNotifier(Colors.grey);
...
MaterialPicker(
    pickerColor: currentColor.value,
...
child: const Text('Change me'),
              color: currentColor.value,
...
list.add(ValueListenableBuilder(
                        valueListenable: currentColor,
                        builder: (BuildContext context, Color current,
                            Widget child) {
                          return Positioned(
                            left: 100,
                            top: 100,
                            child: Container(
                              color: current,
                              height: 100,
                              width: 100,
                            ),
                          );
                        }));    

작업 데모

전체 코드

import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Test(),
    );
  }
}

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  ValueNotifier<Color> currentColor = ValueNotifier(Colors.grey);

  void changecolor(Color color) {
    setState(() {
      currentColor.value = color;
    });
  }

  List<Widget> list = [];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
          ),
          Positioned(
            right: 50,
            top: 50,
            child: RaisedButton(
              elevation: 3.0,
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      titlePadding: const EdgeInsets.all(0.0),
                      contentPadding: const EdgeInsets.all(0.0),
                      content: SingleChildScrollView(
                        child: MaterialPicker(
                          pickerColor: currentColor.value,
                          onColorChanged: changecolor,
                          enableLabel: true,
                        ),
                      ),
                    );
                  },
                );
              },
              child: const Text('Change me'),
              color: currentColor.value,
            ),
          ),
          ...list,
          Positioned(
            left: 50,
            top: 50,
            child: RaisedButton(
              child: Text(
                'Add another Color Sticker',
                style: TextStyle(fontSize: 10),
              ),
              onPressed: () {
                setState(
                  () {
                    list.add(ValueListenableBuilder(
                        valueListenable: currentColor,
                        builder: (BuildContext context, Color current,
                            Widget child) {
                          return Positioned(
                            left: 100,
                            top: 100,
                            child: Container(
                              color: current,
                              height: 100,
                              width: 100,
                            ),
                          );
                        }));
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}