android - 我们如何制作带有圆形复选框的 GridView 并在 flutter 中选择颜色

Question

friend 们，我需要一个颜色选择器，我想在 flutter 中制作它，并将所有颜色保留在圆角检查中。

请看截图。我想要与图片相同的用户界面。

Answer 1

您可以根据颜色的需要将颜色添加到colorsData列表中

这对你有帮助，

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

class MainPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp (
        debugShowCheckedModeBanner: false,
        home:Demo(),
    );
  }

}

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {

  List colorsData = [Colors.green,Colors.red,Colors.greenAccent,Colors.cyan,Colors.purple,Colors.yellow,Colors.blue,Colors.black,Colors.brown,Colors.orange, Colors.teal, Colors.purpleAccent, Colors.blueGrey, Colors.tealAccent, Colors.deepOrangeAccent, Colors.lightBlueAccent];
  int selectedColor = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Color picker"),
        ),
        body: new Container(
          padding: EdgeInsets.all(16.0),
          color: Colors.black12,
          child: GridView.builder(
            scrollDirection: Axis.vertical,
            itemCount: colorsData.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4 ,childAspectRatio:1),
            itemBuilder: (BuildContext context,int index){

              return Padding(
                padding: const EdgeInsets.only(right: 8.0),
                child: Column(
                  children: <Widget>[
                    new FloatingActionButton(
                      onPressed: (){
                        setState(() {
                          selectedColor = index;
                        });
                      },
                      child: Icon(Icons.done,color: index == selectedColor ? Colors.white :colorsData.elementAt(index),size: 28),
                      backgroundColor: colorsData.elementAt(index),
                      elevation: 0.0,
                      heroTag: null,

                    ),
                    Offstage(
                      offstage: index != selectedColor,
                      child: Text("Color Name"),
                    ),
                  ],
                ),
              );
            },
            shrinkWrap: true,
          ),
        )
    );
  }
}

要显示颜色名称，请更改 Color Name 的 Text 静态值，分配适当的颜色名称