- TS TS
- #101
dapat bawat container, iba iba ang kulaySure! I have edited your code to display all the properties of the selected color in the container. Here's the updated code:
Code:import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter_colorpicker/flutter_colorpicker.dart'; class ColorPalettePage extends StatefulWidget { final bool isDarkModeEnabled; const ColorPalettePage({required this.isDarkModeEnabled}); @override _ColorPalettePageState createState() => _ColorPalettePageState(); } class _ColorPalettePageState extends State<ColorPalettePage> { Color pickerColor = Color(0xff443a49); Color currentColor = Color(0xff443a49); List<Color> selectedColors = []; @override Widget build(BuildContext context) { return MaterialApp( theme: widget.isDarkModeEnabled ? ThemeData.dark() : ThemeData.light(), home: Builder( builder: (BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Color Palette'), backgroundColor: Colors.deepPurple, ), body: GridView.count( crossAxisCount: 2, children: List.generate(14, (index) { return GestureDetector( onTap: () { showDialog( context: context, builder: (context) { return AlertDialog( title: const Text('Pick a color!'), content: SingleChildScrollView( child: Column( children: [ BlockPicker( pickerColor: currentColor, onColorChanged: changeColor, ), ElevatedButton( onPressed: () { setState(() { currentColor = pickerColor; selectedColors.add(currentColor); }); Navigator.of(context).pop(); }, child: Text('Select'), ), ], ), ), ); }, ); }, child: Container( margin: EdgeInsets.all(10), decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), border: Border.all(color: Color(0xffe3d9d9)), color: Colors.white, boxShadow: const [ BoxShadow( color: Color(0x3f000000), offset: Offset(0, 4), blurRadius: 2, ), BoxShadow( color: Color(0x3f000000), offset: Offset(5, 4), blurRadius: 2, ), ], ), child: Stack( children: [ Align( alignment: Alignment.bottomLeft, child: Padding( padding: EdgeInsets.all(8), child: Text( selectedColors.isEmpty ? 'No color selected' : selectedColors.join(','), style: TextStyle( color: Colors.black, fontSize: 16, ), ), ), ), Align( alignment: Alignment.bottomRight, child: Padding( padding: EdgeInsets.all(8), child: GestureDetector( onTap: () { Clipboard.setData( ClipboardData( text: selectedColors.isEmpty ? 'No color selected' : selectedColors.join(','), ), ); ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text('Color code copied to clipboard!'), ), ); }, child: Image.asset( 'assets/copybutton.png', width: 24, height: 24, ), ), ), ), Container( margin: const EdgeInsets.fromLTRB(0, 0, 0, 50), width: double.infinity, height: 100, decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), color: currentColor, boxShadow: const [ BoxShadow( color: Color(0x3f000000), offset: Offset(0, 0), blurRadius: 2, ), BoxShadow( color: Color(0x3f000000), offset: Offset(0, 5), blurRadius: 2, ) ], ), ), ], ), ), ); }), ), floatingActionButton: FloatingActionButton( onPressed: () { showDialog( context: context, builder: (context) { return AlertDialog( title: const Text('Pick a color!'), content: SingleChildScrollView( child: Column( children: [ BlockPicker( pickerColor: pickerColor, onColorChanged: changeColor, ), ElevatedButton( onPressed: () { setState(() { currentColor = pickerColor; selectedColors.add(currentColor); }); Navigator.of(context).pop(); }, child: Text('Select'), ), ], ), ), ); }, ); }, backgroundColor: Colors.white, child: Padding( padding: const EdgeInsets.all(20), child: Image.asset('assets/square icon.png'), ), ), floatingActionButtonLocation: FloatingActionButtonLocation.endFloat, ); }, ), ); } void changeColor(Color color) { setState(() { pickerColor = color; }); } }
In this updated code, I added aList<Color>
namedselectedColors
to store all the selected colors. When a color is selected, it will be added to this list. Then, in the container, I display all the selected colors by joining them with commas usingselectedColors.join(',')
. If no color is selected, it will display "No color selected". I also updated the functionality to copy the color codes to the clipboard to include all the selected colors.
Let me know if you need further assistance!