change text color of CupertinoTimerPicker - flutter

I tried to change the text color of CupertinoDatePicker following this answer and it was successful but when i wanted to change the color of CupertinoTimerPicker it did not change it i want the color of text to be white and the style to be same as the one below
showDialog(
context: context,
builder: (context) {
return AlertDialog(
backgroundColor: const Color(0xff2e2e2e),
title: Column(
children: [
Text(
'Set Duration',
style: TextStyle(
color: Colors.white, fontSize: 16),
),
Divider(
height: 6,
color: Colors.white,
),
],
),
content: CupertinoTheme(
data: CupertinoThemeData(
brightness: Brightness.light,
textTheme: CupertinoTextThemeData(
dateTimePickerTextStyle: TextStyle(color: Colors.red),
),
),
child: CupertinoTimerPicker(
mode: CupertinoTimerPickerMode.hms,
minuteInterval: 1,
secondInterval: 1,
initialTimerDuration: Duration(hours:0, minutes: 0, seconds: 0),
onTimerDurationChanged: (Duration changedTimer) {
setState(() {
initialTimer = changedTimer;
});
},
),
),
);
},
);

Related

How to change the icon according to the theme in flutter

I'm using provider for managing the dark and light mode along with shared preferences to save it. I have successfully managed to save the selected theme but I'm unable to change the icons and the text in ListTile of my drawer according to the selection.
Theme.dart:
class ThemeProvider extends ChangeNotifier {
late ThemeData _selectedTheme;
late Typography defaultTypography;
late SharedPreferences prefs;
ThemeData dark = ThemeData.dark().copyWith();
ThemeData light = ThemeData.light().copyWith();
ThemeProvider(bool darkThemeOn) {
_selectedTheme = darkThemeOn ? dark : light;
}
Future<void> swapTheme() async {
prefs = await SharedPreferences.getInstance();
if (_selectedTheme == dark) {
_selectedTheme = light;
await prefs.setBool("darkTheme", false);
} else {
_selectedTheme = dark;
await prefs.setBool("darkTheme", true);
}
notifyListeners();
}
ThemeData getTheme() => _selectedTheme;
}
How I want the icons to change but this code isnt working.
ListTile(
onTap: () {
Provider.of<ThemeProvider>(context, listen: false)
.swapTheme();
},
leading: Icon(MyApp.themeNotifier.value == ThemeMode.light
? Icons.dark_mode
: Icons.light_mode),
title: MyApp.themeNotifier.value == ThemeMode.light
? Text(
"Dark Mode",
style: TextStyle(
fontFamily: "San Francisco",
),
)
: Text(
"Light Mode",
style: TextStyle(
fontFamily: "San Francisco",
),
),
),
The ? and : logic I want here to be used on the selected theme like if its dark mode then the icon should be sun and it should say light mode and alternate of that for light mode.
Main file code:
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
SharedPreferences.getInstance().then((prefs) {
var isDarkTheme = prefs.getBool("darkTheme") ?? false;
SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
// await MobileAds.instance.initialize();
return runApp(
ChangeNotifierProvider<ThemeProvider>(
child: MyApp(),
create: (BuildContext context) {
return ThemeProvider(isDarkTheme);
},
),
);
});
}
class MyApp extends StatelessWidget {
static final ValueNotifier<ThemeMode> themeNotifier =
ValueNotifier(ThemeMode.light);
#override
Widget build(BuildContext context) {
return ValueListenableBuilder<ThemeMode>(
valueListenable: themeNotifier,
builder: (_, ThemeMode currentMode, __) {
return Consumer<ThemeProvider>(builder: (context, value, child) {
return ChangeNotifierProvider<AppProvider>(
create: (context) => AppProvider(),
child: MaterialApp(
title: 'Buddies',
darkTheme: ThemeData.dark(),
theme: value.getTheme(),
themeMode: currentMode,
debugShowCheckedModeBanner: false,
home: StreamBuilder(
stream: FirebaseAuth.instance.authStateChanges(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return HomePage(
showPop: false,
);
}
return LoginScreen();
}),
),
);
});
});
}
}
Homefile :
#override
Widget build(BuildContext context) {
Future.delayed(Duration.zero, () => showDialogIfFirstLoaded(context));
return AdvancedDrawer(
backdropColor: Theme.of(context).primaryColor,
controller: _advancedDrawerController,
animationCurve: Curves.easeInOut,
animationDuration: const Duration(milliseconds: 300),
animateChildDecoration: true,
rtlOpening: false,
disabledGestures: false,
childDecoration: const BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(16)),
),
drawer: SafeArea(
child: Container(
color: Theme.of(context).primaryColor,
child: ListTileTheme(
textColor: Colors.white,
iconColor: Colors.white,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
StreamBuilder(
stream: FirebaseFirestore.instance
.collection("users")
.doc(currentUserUid)
.snapshots(),
builder: (context,
AsyncSnapshot<DocumentSnapshot<Map<String, dynamic>>>
snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
}
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
return Container(
width: 128.0,
height: 128.0,
margin: const EdgeInsets.only(
top: 24.0,
bottom: 64.0,
),
child: ClipOval(
child: SizedBox.fromSize(
size: Size.fromRadius(48), // Image radius
child: Image.network(snapshot.data!.get("image"),
fit: BoxFit.fill),
),
),
);
},
),
ListTile(
onTap: () {
Provider.of<ThemeProvider>(context, listen: false)
.swapTheme();
},
leading: Icon(value.mode == ThemeMode.light
? Icons.dark_mode
: Icons.light_mode),
title: value.mode == ThemeMode.light
? Text(
"Dark Mode",
style: TextStyle(
fontFamily: "San Francisco",
),
)
: Text(
"Light Mode",
style: TextStyle(
fontFamily: "San Francisco",
),
),
),
// ListTile(
// onTap: () {
// Provider.of<ThemeProvider>(context, listen: false)
// .swapTheme();
// },
// leading: Icon(MyApp.themeNotifier.value == ThemeMode.light
// ? Icons.dark_mode
// : Icons.light_mode),
// title: MyApp.themeNotifier.value == ThemeMode.light
// ? Text(
// "Dark Mode",
// style: TextStyle(
// fontFamily: "San Francisco",
// ),
// )
// : Text(
// "Light Mode",
// style: TextStyle(
// fontFamily: "San Francisco",
// ),
// ),
// ),
ListTile(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (ctx) => HomePage(
showPop: false,
),
),
);
},
leading: Icon(Icons.home),
title: Text(
'Home',
style: TextStyle(
fontFamily: "San Francisco",
),
),
),
ListTile(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (ctx) => ProfilePage(),
),
);
},
leading: Icon(Icons.person),
title: Text(
'Profile',
style: TextStyle(
fontFamily: "San Francisco",
),
),
),
ListTile(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (ctx) => ContactUs(),
),
);
},
leading: Icon(Icons.email),
title: Text(
'Contact us',
style: TextStyle(
fontFamily: "San Francisco",
),
),
),
ListTile(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (ctx) => ReportBug(),
),
);
},
leading: Icon(Icons.bug_report),
title: Text(
'Report a bug',
style: TextStyle(
fontFamily: "San Francisco",
),
),
),
ListTile(
onTap: () async {
await FirebaseAuth.instance.signOut();
Navigator.of(context).pushReplacement(
MaterialPageRoute(
builder: (ctx) => LoginScreen(),
),
);
},
leading: Icon(Icons.logout),
title: Text(
'Logout',
style: TextStyle(
fontFamily: "San Francisco",
),
),
),
Spacer(),
DefaultTextStyle(
style: TextStyle(
fontSize: 12,
),
child: GestureDetector(
onTap: () {
_launchURL(
"https://buddiesapp.co/policies/privacy-policy");
},
child: Container(
margin: const EdgeInsets.symmetric(
vertical: 16.0,
),
child: Text(
'Privacy Policy',
style: TextStyle(
fontFamily: "San Francisco",
fontSize: 15,
decoration: TextDecoration.underline),
),
),
),
),
],
),
),
),
),
child: CheckDealScreen(
home: Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text(
"Buddies",
style: TextStyle(
fontFamily: "San Francisco",
),
),
automaticallyImplyLeading: false,
leading: IconButton(
onPressed: _handleMenuButtonPressed,
icon: ValueListenableBuilder<AdvancedDrawerValue>(
valueListenable: _advancedDrawerController,
builder: (_, value, __) {
return AnimatedSwitcher(
duration: Duration(milliseconds: 250),
child: Icon(
value.visible ? Icons.clear : Icons.menu,
key: ValueKey<bool>(value.visible),
),
);
},
),
),
backgroundColor: Theme.of(context).primaryColor,
),
body: Consumer<ThemeProvider>(
builder: (context, value, child) {
return currentUserUid.isEmpty
? Center(
child: CircularProgressIndicator(),
)
: StreamBuilder(
stream: FirebaseFirestore.instance
.collection("users")
.doc(currentUserUid)
.snapshots(),
builder: (context,
AsyncSnapshot<DocumentSnapshot<Map<String, dynamic>>>
snapshot) {
if (snapshot.connectionState ==
ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
}
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/splashnew.png",
scale: 5,
),
SizedBox(
height: 40,
),
Container(
width: double.infinity,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Theme.of(context).primaryColor,
),
child: MaterialButton(
child: Column(
children: [
SizedBox(
height: 6.0,
),
Text(
"Meet & Bom",
style: const TextStyle(
color: Colors.white,
fontFamily: "San Francisco",
fontStyle: FontStyle.normal,
fontSize: 18,
),
),
Text(
"Get 50 points for bomming",
style: const TextStyle(
fontFamily: "San Francisco",
fontStyle: FontStyle.normal,
fontSize: 12,
),
),
],
),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (ctx) => const DonateSnus(),
),
);
},
),
),
const SizedBox(
height: 24.0,
),
Container(
width: double.infinity,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Theme.of(context).primaryColor,
),
child: MaterialButton(
child: Column(
children: [
SizedBox(
height: 6.0,
),
Text(
"Meet a Buddy",
style: const TextStyle(
color: Colors.white,
fontFamily: "San Francisco",
fontStyle: FontStyle.normal,
fontSize: 18,
),
),
Text(
"You'll need 10 points",
style: const TextStyle(
fontFamily: "San Francisco",
fontStyle: FontStyle.normal,
fontSize: 12,
),
),
],
),
onPressed: () {
if (snapshot.data!.get("points") >= 10) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (ctx) => INeedSnus(),
),
);
} else {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(
content: Text(
"You need 10 points to send request ",
style: TextStyle(
fontFamily: "San Francisco",
),
),
));
}
},
),
),
const SizedBox(
height: 24.0,
),
isLoaded
? Center(
child: CircularProgressIndicator(),
)
: Container(
width: double.infinity,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Theme.of(context).primaryColor,
),
child: MaterialButton(
child: Column(
children: [
SizedBox(
height: 6.0,
),
Text(
"Watch ads - Get Points ",
style: const TextStyle(
color: Colors.white,
fontFamily: "San Francisco",
fontStyle: FontStyle.normal,
fontSize: 18,
),
),
Text(
"Get 2.5 points",
style: const TextStyle(
fontFamily: "San Francisco",
fontStyle: FontStyle.normal,
fontSize: 12,
),
),
],
),
onPressed: () {
loadAd(snapshot.data!.get("points"));
// print(DateTime.now().toLocal());
},
),
),
const SizedBox(
height: 24.0,
),
Container(
width: double.infinity,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Theme.of(context).primaryColor,
),
child: MaterialButton(
child: Column(
children: [
SizedBox(
height: 6.0,
),
Text(
"Refer a friend",
style: const TextStyle(
color: Colors.white,
fontFamily: "San Francisco",
fontStyle: FontStyle.normal,
fontSize: 18,
),
),
Text(
"Get 5 Points",
style: const TextStyle(
fontFamily: "San Francisco",
fontStyle: FontStyle.normal,
fontSize: 12,
),
),
],
),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (ctx) => ReferAFriend(
referCode: snapshot.data!
.get("myrefercode")
.toString(),
),
),
);
},
),
),
const SizedBox(
height: 24.0,
),
Container(
width: 150,
padding: const EdgeInsets.symmetric(
horizontal: 12.0),
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Theme.of(context).primaryColor,
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"Points",
style: TextStyle(
fontFamily: "San Francisco",
fontStyle: FontStyle.normal,
color: Colors.white,
),
),
Text(
"${snapshot.data!.get("points").toStringAsFixed(2)}",
style: TextStyle(
fontFamily: "San Francisco",
fontStyle: FontStyle.normal,
color: Colors.white,
),
),
],
),
),
const SizedBox(
height: 24.0,
),
],
),
);
});
},
),
),
),
);
}
void _handleMenuButtonPressed() {
_advancedDrawerController.showDrawer();
}

I've used ThemeMode to check the mode.
class ThemeProvider extends ChangeNotifier {
late ThemeMode _themeMode;
late Typography defaultTypography;
late SharedPreferences prefs;
ThemeData dark = ThemeData.dark().copyWith();
ThemeData light = ThemeData.light().copyWith();
ThemeProvider(bool darkThemeOn) {
_themeMode = darkThemeOn ? ThemeMode.dark : ThemeMode.light;
}
Future<void> swapTheme() async {
prefs = await SharedPreferences.getInstance();
if (_themeMode == ThemeMode.light) {
await prefs.setBool("darkTheme", false);
_themeMode = ThemeMode.dark;
} else {
await prefs.setBool("darkTheme", true);
_themeMode = ThemeMode.light;
}
notifyListeners();
}
ThemeMode get mode => _themeMode;
}
void main() async {
WidgetsFlutterBinding.ensureInitialized();
SharedPreferences.getInstance().then((prefs) {
var isDarkTheme = prefs.getBool("darkTheme") ?? false;
return runApp(
ChangeNotifierProvider<ThemeProvider>(
create: (BuildContext context) {
return ThemeProvider(isDarkTheme);
},
child: const MyApp(),
),
);
});
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Consumer<ThemeProvider>(
builder: (context, themeProvider, child) {
return MaterialApp(
title: 'Buddies',
darkTheme: themeProvider.dark,
theme: themeProvider.light,
themeMode: themeProvider.mode,
debugShowCheckedModeBanner: false,
home: ThemeTester(),
);
},
);
}
}
class ThemeTester extends StatelessWidget {
const ThemeTester({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Consumer<ThemeProvider>(
builder: (context, value, child) {
return Column(
children: [
ListTile(
onTap: () {
Provider.of<ThemeProvider>(context, listen: false)
.swapTheme();
},
leading: Icon(value.mode == ThemeMode.light
? Icons.dark_mode
: Icons.light_mode),
title: value.mode == ThemeMode.light
? Text(
"Dark Mode",
style: TextStyle(
fontFamily: "San Francisco",
),
)
: Text(
"Light Mode",
style: TextStyle(
fontFamily: "San Francisco",
),
),
),
],
);
},
),
);
}
}

For the icon, instead of doing
MyApp.themeNotifier.value == ThemeMode.light ? Icons.dark_mode : Icons.light_mode
You will need to subscribe to the provider. You can use the same way you did in your onTap to access the provider:
Provider.of<ThemeProvider>(context, listen: true).value == ThemeMode.light ? Icons.dark_mode : Icons.light_mode
Notice listen: true so your widget subscribes to your ThemeNotifier and rebuilds every time it notifies its listeners.

How to save ThemeData in flutter

In my Flutter app the user can define a custom Theme by picking the colors from color pickers. After that they can save the ThemeData to a list and use it. The problem is that after the app restarts the ThemeData added by the user disappers. How can I store these ThemeData-s into the list to remain even after the app restarts?
Here is my code:
The ThemeData list:
I also have two ThemeData which is added by default.
List<ThemeData> toReturnTheme = <ThemeData>[];
List<ThemeData> getThemes() {
ThemeData szikraTheme = ThemeData(
scaffoldBackgroundColor: Color(0xff5a89ba),
backgroundColor: Color(0xff5a89b0),
buttonColor: Color(0xfff78848),
accentColor: Colors.white,
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Color(0xff3a89ba),
),
textTheme: TextTheme(
bodyText2: TextStyle(color: Colors.white, fontFamily: 'Muli')));
ThemeData cobotTheme = ThemeData(
scaffoldBackgroundColor: Color(0xff207ABB),
backgroundColor: Color(0xff207ABB),
buttonColor: Color(0xfff78848),
accentColor: Colors.white,
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Color(0xff3a89ba),
),
textTheme: TextTheme(
bodyText2: TextStyle(color: Colors.white, fontFamily: 'Muli')));
toReturnTheme.add(szikraTheme);
toReturnTheme.add(cobotTheme);
return toReturnTheme;
}
void addToThemeList(ThemeData theme){
toReturnTheme.add(theme);
}
The Button that adds the new ThemeData to the list:
Padding(
padding: const EdgeInsets.all(8.0),
child: TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Theme.of(context).accentColor,
)),
onPressed: () {
try {
ThemeData customTheme = ThemeData(
scaffoldBackgroundColor:
Color(bckgrndColor!.value),
backgroundColor: Color(bckgrndColor!.value),
buttonColor: Color(buttonColor!.value),
accentColor: Color(fontColor!.value),
floatingActionButtonTheme:
FloatingActionButtonThemeData(
backgroundColor: Color(arrowColor!.value),
),
textTheme: TextTheme(
bodyText2: TextStyle(
color: Color(fontColor!.value),
fontFamily: 'Muli'),
bodyText1: TextStyle(
color: Color(fontColor!.value),
fontFamily:
customThemeController.text)));
customThemeController.clear();
addToThemeList(customTheme);
saveTheme();
final snackBar = SnackBar(
behavior: SnackBarBehavior.floating,
content: Text(
"themeCreated".tr().toString(),
));
ScaffoldMessenger.of(context)
.showSnackBar(snackBar);
} catch (e) {
final snackBar = SnackBar(
behavior: SnackBarBehavior.floating,
backgroundColor: Colors.redAccent,
content: Text(
"chooseValidColors".tr().toString(),
));
ScaffoldMessenger.of(context)
.showSnackBar(snackBar);
}
setState(() {});
},
child: Text(
"createNewTheme".tr().toString(),
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 25.0,
),
)),
),
And the ListView that displays the list of ThemeData:
Container(
width: MediaQuery.of(context).size.width / 2,
height: 100,
child: ListView.builder(
shrinkWrap: true,
itemCount: toReturnTheme.length,
itemBuilder: (context, int index) {
if (index < 2) {
return Container();
} else {
return Container(
child: Column(
children: [
ListTile(
title: GestureDetector(
child: Text(
toReturnTheme[index]
.textTheme
.bodyText1!
.fontFamily
.toString() ==
""
? "Custom Theme"
: toReturnTheme[index]
.textTheme
.bodyText1!
.fontFamily
.toString(),
style: TextStyle(
fontSize: 22.0,
color: Theme.of(context)
.accentColor),
),
onTap: () {
getThemeManager(context)
.selectThemeAtIndex(index);
},
),
trailing: GestureDetector(
child: Icon(
Icons.delete,
color: Theme.of(context).accentColor,
),
onTap: () {
toReturnTheme.removeAt(index);
setState(() {});
},
),
leading: Icon(
Icons.palette_outlined,
color: Theme.of(context).accentColor,
),
),
],
),
);
}
}),
),

Flutter - CuppertinoDatePicker theme overwrite breaks column width

I'm using the CupertinoDatePicker for setting a date in a form. To match our application design I need the picker to be in dark mode, so I adjusted the backgroundColor. For the text in the picker to be white I wrapped the picker inside a Container with a CupertinoTheme to set the color. I did this based on this solution: How to change font size for CupertinoDatePicker in Flutter?. For some reason this breaks the widths of the columns in the CupertinoDatePicker, and I don't have a clue why that's happening. If I remove the CupertinoTheme the columns are fine but the text is dark too, thus unreadable.
Code:
void showPlatformDatePicker() {
showCupertinoModalPopup(
context: context,
builder: (_) => Container(
color: Colors.black87,
height: 400,
child: Column(
children: [
Container(
color: Color.fromRGBO(18, 18, 18, 1),
alignment: Alignment.centerRight,
child: TextButton(
onPressed: () => Navigator.pop(context),
child: Text(
'Done',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: Colors.white,
),
),
),
),
Container(
height: 350,
width: double.infinity,
child: CupertinoTheme(
data: CupertinoThemeData(
textTheme: CupertinoTextThemeData(
dateTimePickerTextStyle: TextStyle(
color: Colors.white,
),
),
),
child: CupertinoDatePicker(
backgroundColor: Colors.black87,
mode: CupertinoDatePickerMode.date,
maximumDate: DateTime.now().subtract(Duration(days: 365)),
initialDateTime:
DateTime.now().subtract(Duration(days: 365 * 18)),
onDateTimeChanged: (val) {
final date = val.toIso8601String();
context
.bloc<FormBloc>()
.add(DateChanged(date));
},
),
),
),
],
),
),
);
}
Screenshot:

Try using this code
You can edit it according to your requirement
Container(
height: MediaQuery.of(context).size.height * 0.25,
child: CupertinoDatePicker(
initialDateTime: DateTime.now(),
onDateTimeChanged: (DateTime nowDate) {
var currentTime = nowDate;
},
use24hFormat: true,
minimumYear: 2010,
maximumYear: 2018,
minuteInterval: 1,
mode: CupertinoDatePickerMode.dateAndTime,
),
);

Strangely, adding a fontSizeto the CupertinoTextThemeData fixes this issue:
Container(
height: 350,
width: double.infinity,
child: CupertinoTheme(
data: CupertinoThemeData(
textTheme: CupertinoTextThemeData(
dateTimePickerTextStyle: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
),
child: CupertinoDatePicker(
backgroundColor: Colors.black87,
mode: CupertinoDatePickerMode.date,
maximumDate: DateTime.now().subtract(Duration(days: 365)),
initialDateTime:
DateTime.now().subtract(Duration(days: 365 * 18)),
onDateTimeChanged: (val) {
final date = val.toIso8601String();
context
.bloc<FormBloc>()
.add(DateChanged(date));
},
),
),

How to set Divider in PopupMenuItem of flutter?

I want to set divider between PopupMenuItem and I want to change styling PopupMenuDivider color which that have default color. How can i do this ?

You can do this very easily using the Theme class, using which you can change the icon color, text color and Default PopupMenuDivider color.
Again, you can easily do this on Divider at PopupMenuItem using PopupMenuDivider.
actions: [
Theme(
data: Theme.of(context).copyWith(
dividerTheme: DividerThemeData(
color: Colors.black,
),
iconTheme: IconThemeData(color: Colors.white),
textTheme: TextTheme().apply(bodyColor: Colors.white),
),
child: PopupMenuButton<int>(
color: Colors.indigo,
//onSelected: (item) => onSelected(context, item),
itemBuilder: (context) => [
PopupMenuItem<int>(
value: 0,
child: Text('Settings'),
),
PopupMenuDivider(),
PopupMenuItem<int>(
value: 1,
child: Text('Share'),
),
PopupMenuDivider(),
PopupMenuItem<int>(
value: 2,
child: Row(
children: [
Icon(Icons.logout),
const SizedBox(width: 8),
Text('Sign Out'),
],
),
),
],
),
),
],

How to change the color of the text in each color bar?

xylophone pic
The last thing I would like to change on this app is the color of the text to make it blend better with the background color of each bar.
For example, I would like to change the 'Red' text to yellow. I would like to change the 'Light blue' text to orange.
import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/material.dart';
void main() => runApp(XylophoneApp());
class XylophoneApp extends StatelessWidget {
void buttonSound(int noteNumber) {
final player = AudioCache();
player.play('note$noteNumber.wav');
}
Expanded buildKey(
{Color color, int noteNumber, String text}) {
return Expanded(
child: FlatButton(
color: color,
onPressed: () {
buttonSound(noteNumber);
},
child: Center(
child: Text(
text,
style: TextStyle(
fontFamily: 'Vast Shadow',
fontSize: 20,
color: Colors.black.withOpacity(0.5),
fontWeight: FontWeight.w700,
letterSpacing: 2,
),
),
),
),
);
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
buildKey(color: Colors.red, noteNumber: 1, text: 'Red'),
buildKey(color: Colors.blue, noteNumber: 2, text: 'Light Blue'),
buildKey(color: Colors.orangeAccent, noteNumber: 3, text: 'Orange Accent'),
buildKey(color: Colors.deepPurpleAccent, noteNumber: 4, text: 'Purple'),
buildKey(color: Colors.lightGreen, noteNumber: 5, text: 'Key Lime'),
buildKey(color: Colors.blueGrey, noteNumber: 6, text: 'Blue Grey'),
buildKey(color: Colors.lime, noteNumber: 7, text: 'Yellow Accent'),
],
),
),
),
);
}
}

Add another parameter for the text color
{Color color, int noteNumber, String text, Color textColor}) {
return Expanded(
child: FlatButton(
color: color,
onPressed: () {
buttonSound(noteNumber);
},
child: Center(
child: Text(
text,
style: TextStyle(
fontFamily: 'Vast Shadow',
fontSize: 20,
color: textColor,
fontWeight: FontWeight.w700,
letterSpacing: 2,
),
),
),
),
);
}
Then call the method passing the text color
buildKey(color: Colors.red, noteNumber: 1, text: 'Red', textColor: Colors.yellow)
Make sure you pass the textColor.