I'll help improve the UI by organizing the code better and using a consistent color scheme. Here's the enhanced version: class AppColors { static const Color blue = Color(0xFF2196F3); static const Color lightBlue = Color(0xFFE3F2FD); static const Color darkBlue = Color(0xFF1565C0); static const Color white = Color(0xFFFFFFFF); static const Color grey = Color(0xFF9E9E9E); static const Color lightGrey = Color(0xFFEEEEEE); static const Color red = Color(0xFFE53935); } import 'dart:io'; import 'package:flutter/material.dart'; import 'package:flutter_tts/flutter_tts.dart'; import 'package:image_picker/image_picker.dart'; import 'app_colors.dart'; class CreateNewboard extends StatefulWidget { const CreateNewboard({super.key}); @override State createState() => _CreateNewboardState(); } class _CreateNewboardState extends State { final TextEditingController _boardNameController = TextEditingController(); bool _isCreated = false; List buttons = []; final FlutterTts flutterTts = FlutterTts(); List availableVoices = []; @override void initState() { super.initState(); _loadVoices(); } Future _loadVoices() async { try { final voices = await flutterTts.getVoices; if (voices is List) { setState(() { availableVoices = voices .map((voice) => voice['name']?.toString() ?? "") .where((name) => name.isNotEmpty) .toList(); }); } } catch (e) { setState(() { availableVoices = ['Default Voice', 'Voice 1', 'Voice 2']; }); } } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: AppColors.white, appBar: AppBar( leading: IconButton( icon: const Icon(Icons.arrow_back, color: AppColors.white), onPressed: () => Navigator.pop(context), ), centerTitle: true, title: const Text( 'Create New Board', style: TextStyle( fontWeight: FontWeight.bold, color: AppColors.white, ), ), backgroundColor: AppColors.blue, elevation: 0, ), body: Padding( padding: const EdgeInsets.all(16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ TextField( controller: _boardNameController, decoration: InputDecoration( labelText: 'Board Name', border: OutlineInputBorder( borderRadius: BorderRadius.circular(8), ), filled: true, fillColor: AppColors.lightGrey, ), ), const SizedBox(height: 20), if (_isCreated) ...[ Expanded( child: Column( children: [ Expanded( child: buttons.isEmpty ? Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const Text( 'No buttons added yet', style: TextStyle( fontSize: 18, color: AppColors.grey, ), ), const SizedBox(height: 20), ElevatedButton.icon( onPressed: () => _showAddButtonDialog(), icon: const Icon(Icons.add), label: const Text('Add First Button'), style: ElevatedButton.styleFrom( backgroundColor: AppColors.blue, foregroundColor: AppColors.white, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), ), ], ), ) : SingleChildScrollView( child: Wrap( spacing: 10, runSpacing: 10, children: [ ...buttons.map((button) => _buildButton(button)), _buildAddButton(), ], ), ), ), Padding( padding: const EdgeInsets.symmetric(vertical: 16.0), child: Row( mainAxisAlignment: MainAxisAlignment.end, children: [ TextButton( onPressed: () => Navigator.pop(context), style: TextButton.styleFrom( foregroundColor: AppColors.grey, padding: const EdgeInsets.symmetric( horizontal: 24, vertical: 12), ), child: const Text('Cancel'), ), const SizedBox(width: 10), ElevatedButton( onPressed: () { ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text('Board saved successfully!'), duration: Duration(seconds: 2), ), ); Navigator.pop(context); }, style: ElevatedButton.styleFrom( backgroundColor: AppColors.blue, foregroundColor: AppColors.white, padding: const EdgeInsets.symmetric( horizontal: 24, vertical: 12), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), child: const Text('Save Board'), ), ], ), ), ], ), ), ], if (!_isCreated) Row( mainAxisAlignment: MainAxisAlignment.end, children: [ TextButton( onPressed: () => Navigator.pop(context), style: TextButton.styleFrom( foregroundColor: AppColors.grey, padding: const EdgeInsets.symmetric( horizontal: 24, vertical: 12), ), child: const Text('Cancel'), ), const SizedBox(width: 10), ElevatedButton( onPressed: () { if (_boardNameController.text.isNotEmpty) { setState(() => _isCreated = true); } else { ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text('Please enter a board name'), ), ); } }, style: ElevatedButton.styleFrom( backgroundColor: AppColors.blue, foregroundColor: AppColors.white, padding: const EdgeInsets.symmetric( horizontal: 24, vertical: 12), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), child: const Text('Create Board'), ), ], ), ], ), ), ); } Widget _buildAddButton() { return GestureDetector( onTap: () => _showAddButtonDialog(), child: Container( width: 100, height: 100, decoration: BoxDecoration( color: AppColors.lightBlue, border: Border.all(color: AppColors.blue), borderRadius: BorderRadius.circular(12), ), child: const Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.add, size: 30, color: AppColors.blue), SizedBox(height: 8), Text('Add Button', style: TextStyle(color: AppColors.blue)), ], ), ), ); } Widget _buildButton(ButtonData button) { return GestureDetector( onTap: () async { if (button.phrase.isNotEmpty) { if (button.voice != null) { await flutterTts.setVoice({"name": button.voice!}); } await flutterTts.speak(button.phrase); } }, onLongPress: () { showDialog( context: context, builder: (context) => AlertDialog( title: const Text('Button Options'), content: Column( mainAxisSize: MainAxisSize.min, children: [ ListTile( leading: const Icon(Icons.edit, color: AppColors.blue), title: const Text('Edit'), onTap: () { Navigator.pop(context); _showAddButtonDialog(buttonData: button); }, ), ListTile( leading: const Icon(Icons.delete, color: AppColors.red), title: const Text('Delete'), onTap: () { setState(() => buttons.remove(button)); Navigator.pop(context); }, ), ], ), ), ); }, child: Container( width: 100, height: 100, decoration: BoxDecoration( color: AppColors.lightBlue, borderRadius: BorderRadius.circular(12), boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.1), blurRadius: 4, offset: const Offset(0, 2), ), ], ), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ if (button.image != null) Expanded( flex: 3, child: ClipRRect( borderRadius: const BorderRadius.vertical( top: Radius.circular(12), ), child: Image.file( button.image!, fit: BoxFit.cover, width: double.infinity, ), ), ) else const Expanded( flex: 3, child: Icon(Icons.touch_app, size: 40, color: AppColors.blue), ), Expanded( flex: 1, child: Container( width: double.infinity, decoration: BoxDecoration( color: AppColors.blue, borderRadius: const BorderRadius.vertical( bottom: Radius.circular(12), ), child: Center( child: Text( button.label, style: const TextStyle( fontWeight: FontWeight.bold, color: AppColors.white, ), overflow: TextOverflow.ellipsis, maxLines: 1, ), ), ), ), ], ), ), ); } void _showAddButtonDialog({ButtonData? buttonData}) { final labelController = TextEditingController(text: buttonData?.label); final phraseController = TextEditingController(text: buttonData?.phrase); String? selectedVoice = buttonData?.voice; File? selectedImage = buttonData?.image; showDialog( context: context, builder: (dialogContext) => StatefulBuilder( builder: (builderContext, setDialogState) => Dialog( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(16), ), child: Padding( padding: const EdgeInsets.all(16.0), child: Column( mainAxisSize: MainAxisSize.min, children: [ Text( buttonData == null ? 'Add New Button' : 'Edit Button', style: const TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: AppColors.blue, ), ), const SizedBox(height: 16), TextField( controller: labelController, decoration: InputDecoration( labelText: 'Button Label', border: OutlineInputBorder( borderRadius: BorderRadius.circular(8), ), filled: true, fillColor: AppColors.lightGrey, ), ), const SizedBox(height: 16), TextField( controller: phraseController, decoration: InputDecoration( labelText: 'Button Phrase', border: OutlineInputBorder( borderRadius: BorderRadius.circular(8), ), filled: true, fillColor: AppColors.lightGrey, ), maxLines: 3, ), const SizedBox(height: 16), Row( children: [ Expanded( child: ElevatedButton.icon( onPressed: () async { final ImagePicker picker = ImagePicker(); final XFile? image = await picker.pickImage( source: ImageSource.gallery, ); if (image != null) { setDialogState(() { selectedImage = File(image.path); }); } }, icon: const Icon(Icons.upload), label: const Text('Upload Image'), style: ElevatedButton.styleFrom( backgroundColor: AppColors.blue, foregroundColor: AppColors.white, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), ), ), ), if (selectedImage != null) ...[ const SizedBox(width: 10), Stack( children: [ Container( width: 80, height: 80, decoration: BoxDecoration( border: Border.all(color: AppColors.grey), borderRadius: BorderRadius.circular(8), ), child: ClipRRect( borderRadius: BorderRadius.circular(8), child: Image.file( selectedImage!, fit: BoxFit.cover, ), ), ), Positioned( right: 0, top: 0, child: GestureDetector( onTap: () { setDialogState(() => selectedImage = null); }, child: Container( decoration: const BoxDecoration( color: AppColors.red, shape: BoxShape.circle, ), child: const Icon( Icons.close, color: AppColors.white, size: 18, ), ), ), ), ], ), ], ], ), const SizedBox(height: 16), Container( padding: const EdgeInsets.symmetric(horizontal: 12), decoration: BoxDecoration( color: AppColors.lightGrey, border: Border.all(color: AppColors.grey), borderRadius: BorderRadius.circular(8), ), child: Row( children: [ Expanded( child: DropdownButton( value: selectedVoice, isExpanded: true, hint: const Text('Select Voice'), underline: const SizedBox(), items: availableVoices.map((String voice) { return DropdownMenuItem( value: voice, child: Text(voice), ); }).toList(), onChanged: (String? value) { setDialogState(() => selectedVoice = value); }, ), ), IconButton( onPressed: () async { if (phraseController.text.isNotEmpty) { if (selectedVoice != null) { await flutterTts.setVoice({"name": selectedVoice!}); } await flutterTts.speak(phraseController.text); } }, icon: const Icon(Icons.play_arrow), color: AppColors.blue, ), ], ), ), const SizedBox(height: 24), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ TextButton( onPressed: () => Navigator.pop(dialogContext), style: TextButton.styleFrom( foregroundColor: AppColors.grey, padding: const EdgeInsets.symmetric( horizontal: 24, vertical: 12), ), child: const Text('Cancel'), ), const SizedBox(width: 16), ElevatedButton( onPressed: () { if (labelController.text.isNotEmpty && phraseController.text.isNotEmpty) { setState(() { if (buttonData != null) { buttonData.label = labelController.text; buttonData.phrase = phraseController.text; buttonData.voice = selectedVoice; buttonData.image = selectedImage; } else { buttons.add( ButtonData( label: labelController.text, phrase: phraseController.text, voice: selectedVoice, image: selectedImage, ), ); } }); Navigator.pop(dialogContext); } else { ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text('Label and phrase are required'), ), ); } }, style: ElevatedButton.styleFrom( backgroundColor: AppColors.blue, foregroundColor: AppColors.white, padding: const EdgeInsets.symmetric( horizontal: 24, vertical: 12), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), ), child: const Text('Save'), ), ], ), ], ), ), ), ), ); } @override void dispose() { flutterTts.stop(); _boardNameController.dispose(); super.dispose(); } } class ButtonData { String label; String phrase; String? voice; File? image; ButtonData({ required this.label, required this.phrase, this.voice, this.image, }); }