How to save ThemeData in flutter - 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,
),
),
],
),
);
}
}),
),

Related

change text color of CupertinoTimerPicker

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;
});
},
),
),
);
},
);

flutter: change default Icon text color

I modified textTheme theme data on my application :
ThemeData get lightTheme => ThemeData(
disabledColor: AppColors.disabled,
scaffoldBackgroundColor: AppColors.paper,
textTheme: TextTheme(
button: AppTextStyles.button,
overline: AppTextStyles.overline,
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppSize.s32),
),
),
backgroundColor: MaterialStateProperty.resolveWith(
(final states) => states.contains(MaterialState.disabled)
? 50.gray
: 500.primary,
),
),
),
I Used this code too but not worked:
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppSize.s32),
),
),
backgroundColor: MaterialStateProperty.resolveWith(
(final states) => states.contains(MaterialState.disabled)
? 50.gray
: 500.primary,
),
textStyle: MaterialStateProperty.resolveWith(
(final states) {
return const TextStyle(color: Color(0xFF661F1F));
},
),
),
),
This is AppTextStyles.button,:
static final TextStyle _base = GoogleFonts.inder(
color: Colors.black,
fontWeight: FontWeight.w600,
);
static final button = _base.copyWith(
fontSize: 16.sp, fontWeight: FontWeight.w700, color: Colors.black);
But when I added ElevatedButton the text color is still white?
ElevatedButton.icon(
onPressed: () {},
icon: Icon(Icons.access_alarm),
label: Text("Sign in")),
This is my material:
GetMaterialApp(
theme: AppThemes().lightTheme,
Use the foregroundColor property of the ButtonStyle.
foregroundColor: MaterialStateProperty.all(Colors.black)
try change color in foregroundColor inside ButtonStyle.
foregroundColor: MaterialStateProperty.resolveWith(
(final states) => states.contains(MaterialState.disabled)
? Colors.grey
: Color(0xFF661F1F),

Change color of text ( foreground ) in Elevated Button

Using Flutter, I set ElevatedButton theme in the style.dart with this.
ThemeData appTheme(BuildContext context) {
const fontFamilyFallBack = ['Lexend', 'NotoSans'];
return ThemeData(
primaryColor: Colors.white,
backgroundColor: Colors.white,
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: Colors.green,
onPrimary: Colors.white,
),
),
textTheme: const TextTheme(
headline1: TextStyle(
fontFamilyFallback: fontFamilyFallBack,
),
subtitle1: TextStyle(
fontFamilyFallback: fontFamilyFallBack,
fontSize: 20,
),
bodyText1: TextStyle(
fontFamilyFallback: fontFamilyFallBack,
fontSize: 14,
),
),
);
}
But still the color of the foreground which is my text still does not change to White as the value of onPrimary whereas the color of the background is appliable.
ElevatedButton(
child: Text(
'Tap go to second page',
style: Theme.of(context).textTheme.bodyText1,
),
onPressed: () => context.router.pushNamed('/error'),
)),
I have also tried ButtonStyle one, but I still get the same result.
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
),
),
You pass ButtonStyle to the style property like this:
ThemeData(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.green),
),
),
),
try this
ElevatedButton(
child: Text(
'Tap go to second page',
style:
Theme.of(context).textTheme.bodyText1.copyWith(color:Colors.green),
),
onPressed: () => context.router.pushNamed('/error'),
)),

what is the best way to implement this home screen?

I would like to create a home page for my flutter app. I used templates from the network, but unfortunately I don't get it the way I sketched it in the picture. maybe someone can help me with that
sketch / result
Unfortunately, I'm sure that I can't do it better: - /, would like to have it exactly like the one on the left (icons and colors are not so important)
I used this link from the forum as a template for the appbar, and I had difficulties in inserting it ^^
Custom AppBar Flutter
I also got the code for the BottomNavigationBar from somewhere in the forum, but I think this is not suitable for my purposes anyway. Since I don't like this shrink effect when clicking on it, the two arrow buttons at the edge should snap back when pressed and not stay in the pressed state, as they should stand for the front and back function ...
here is my complete main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
themeMode: ThemeMode.light,
theme: ThemeData(
primaryColor: Color(0xFF34445c),
primaryColorBrightness: Brightness.light,
brightness: Brightness.light,
primaryColorDark: Colors.black,
canvasColor: Color(0xFFCECECE),
appBarTheme: AppBarTheme(brightness: Brightness.light)),
darkTheme: ThemeData(
primaryColor: Colors.black,
primaryColorBrightness: Brightness.dark,
primaryColorLight: Colors.black,
brightness: Brightness.dark,
primaryColorDark: Colors.black,
indicatorColor: Colors.white,
canvasColor: Colors.black,
appBarTheme: AppBarTheme(brightness: Brightness.dark)),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _selectedItemColor = Colors.white;
final _unselectedItemColor = Colors.white30;
final _selectedBgColor = Color(0xFF293749);
final _unselectedBgColor = Color(0xFF34445c);
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 15, fontWeight: FontWeight.normal);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: ZURÜCK',
style: optionStyle,
),
Text(
'Index 1: FAVORITES',
style: optionStyle,
),
Text(
'Index 2: KOMMENTARE / LÖSCHEN',
style: optionStyle,
),
Text(
'Index 3: ABOUT-US',
style: optionStyle,
),
Text(
'Index 4: WEITER',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
Color _getBgColor(int index) =>
_selectedIndex == index ? _selectedBgColor : _unselectedBgColor;
Color _getItemColor(int index) =>
_selectedIndex == index ? _selectedItemColor : _unselectedItemColor;
Widget _buildIcon(IconData iconData, String text, int index) => Container(
width: double.infinity,
height: kBottomNavigationBarHeight,
child: Material(
color: _getBgColor(index),
child: InkWell(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(iconData),
Text(text,
style: TextStyle(fontSize: 9, color: _getItemColor(index))),
],
),
onTap: () => _onItemTapped(index),
),
),
);
_appBar(height) => PreferredSize(
preferredSize: Size(MediaQuery.of(context).size.width, height+80 ),
child: Stack(
children: <Widget>[
Container(
child: Center(
child: Text("TEXT", style: TextStyle(fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.white),
),
),
color:Theme.of(context).primaryColor,
height: height+75,
width: MediaQuery.of(context).size.width,
),
Container(
),
Positioned( // To take AppBar Size only
top: 100.0,
left: 20.0,
right: 20.0,
child: AppBar(
backgroundColor: Color(0xFF293749),
leading: Icon(Icons.menu, color: Colors.white),
primary: false,
title: Container(
margin: EdgeInsets.only(top: 4.0, bottom: 4.0, right: 0.0, left: 0.0),
color: Colors.white,
child: Container(
margin: EdgeInsets.only(top: 0.0, bottom: 0.0, right: 5.0, left: 5.0),
child: TextField(
decoration: InputDecoration(
hintText: "Suchen",
border: InputBorder.none,
hintStyle: TextStyle(color: Colors.grey))),
),
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search, color: Colors.white), onPressed: () {},),
],
),
)
],
),
);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: _appBar(AppBar().preferredSize.height),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
selectedFontSize: 0,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: _buildIcon(Icons.arrow_back_ios_rounded, 'ZURÜCK', 0),
title: SizedBox.shrink(),
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.favorite, 'FAVORITEN', 1),
title: SizedBox.shrink(),
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.comment, 'KOMMENTARE', 2),
title: SizedBox.shrink(),
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.info_outline_rounded, 'ÜBER UNS', 3),
title: SizedBox.shrink(),
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.arrow_forward_ios_rounded, 'WEITER', 4),
title: SizedBox.shrink(),
),
],
currentIndex: _selectedIndex,
selectedItemColor: _selectedItemColor,
unselectedItemColor: _unselectedItemColor,
),
);
}
}
I have modified your code with some commentaries to support you in building the UI.
For the AppBar, you are going in the right direction of using PreferredSize with Stack, just some minor adjustments.
For the BottomNavigationBar, since the provided BottomNavigationBarItem has the icon and title attributes already, we can use that and modify the color from their parents. The 2 arrows buttons can be placed together within the Row.
Here's the full example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
themeMode: ThemeMode.light,
theme: ThemeData(
primaryColor: Color(0xFF34445c),
primaryColorBrightness: Brightness.light,
brightness: Brightness.light,
primaryColorDark: Colors.black,
canvasColor: Color(0xFFCECECE),
appBarTheme: AppBarTheme(brightness: Brightness.light)),
darkTheme: ThemeData(
primaryColor: Colors.black,
primaryColorBrightness: Brightness.dark,
primaryColorLight: Colors.black,
brightness: Brightness.dark,
primaryColorDark: Colors.black,
indicatorColor: Colors.white,
canvasColor: Colors.black,
appBarTheme: AppBarTheme(brightness: Brightness.dark)),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _selectedItemColor = Colors.white;
final _unselectedItemColor = Colors.white30;
final _selectedBgColor = Color(0xFF293749);
final _unselectedBgColor = Color(0xFF34445c);
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 15, fontWeight: FontWeight.normal);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: ZURÜCK',
style: optionStyle,
),
Text(
'Index 1: FAVORITES',
style: optionStyle,
),
Text(
'Index 2: KOMMENTARE / LÖSCHEN',
style: optionStyle,
),
Text(
'Index 3: ABOUT-US',
style: optionStyle,
),
Text(
'Index 4: WEITER',
style: optionStyle,
),
];
_appBar() => PreferredSize(
preferredSize: Size.fromHeight(300),
child: Container(
height: 300,
child: Stack(
children: <Widget>[
Container(
color: Color(0xFF34445D),
height: 180,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"APP TITLE",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w600,
color: Colors.white),
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List<Widget>.generate(
4,
(index) => Padding(
padding: EdgeInsets.symmetric(horizontal: 8.0),
child: Icon(Icons.people, color: Colors.white), // Sample icons for demonstration
),
),
)
],
),
),
Positioned(
top: 150.0,
left: 20.0,
right: 20.0,
child: Container(
color: Color(0xFF293749),
child: Row(
children: [
IconButton(
icon: Icon(Icons.menu, size: 40, color: Colors.white),
padding: EdgeInsets.zero,
onPressed: () {},
),
Expanded(
child: Container(
margin: EdgeInsets.symmetric(vertical: 3),
padding: EdgeInsets.only(left: 3),
color: Colors.white,
height: 30,
child: TextField(
style: TextStyle(color: Colors.black, fontSize: 12),
decoration: InputDecoration(
hintText: 'Search...',
border: InputBorder.none),
),
),
),
IconButton(
icon: Icon(Icons.search, size: 30, color: Colors.white),
padding: EdgeInsets.zero,
onPressed: () {},
),
],
),
),
),
],
),
),
);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: _appBar(),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: Container(
color: _selectedBgColor,
child: Row(
children: [
IconButton(
icon: Icon(Icons.arrow_back_ios, color: Colors.white),
onPressed: () {
setState(() {
_selectedIndex =
_selectedIndex <= 0 ? _selectedIndex : _selectedIndex - 1;
});
},
),
Expanded(
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed, // Add the type here to avoid auto resize
backgroundColor: _selectedBgColor, // You can also set the unselectedBackgroundColor
currentIndex: _selectedIndex,
onTap: (index) => setState(() => _selectedIndex = index), // Update the selected index
selectedItemColor: _selectedItemColor,
unselectedItemColor: _unselectedItemColor,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.favorite), title: Text('FAVORITEN')),
BottomNavigationBarItem(
icon: Icon(Icons.comment), title: Text('KOMMENTARE')),
BottomNavigationBarItem(
icon: Icon(Icons.info_outline_rounded),
title: Text('ÜBER UNS')),
],
),
),
IconButton(
icon: Icon(Icons.arrow_forward_ios, color: Colors.white),
onPressed: () {
setState(() {
_selectedIndex =
_selectedIndex >= 2 ? _selectedIndex : _selectedIndex + 1;
});
},
),
],
),
),
);
}
}

SliverAppBar title doesn't fade if style applied in Flutter

I want to have the title in my SliverAppBar fade in the default way however it stops working once I apply style to the text. You can see how it behave with and without TextStyle. Nothing else changes.
No style
Style applied
Here's the code with style applied:
class FeedScreen extends StatelessWidget {
static const routeName = "/feed_screen";
#override
Widget build(BuildContext context) {
return ViewModelBuilder<WhosHereScreenViewModel>.reactive(
disposeViewModel: false,
initialiseSpecialViewModelsOnce: true,
viewModelBuilder: () => locator<WhosHereScreenViewModel>(),
builder: (context, model, child) {
return Scaffold(
backgroundColor: Colors.white,
body: model.isBusy == true
? Center(child: CircularProgressIndicator())
: CustomScrollView(slivers: [
SliverAppBar(
brightness: Brightness.light,
backgroundColor: Colors.white,
title: Text(
'miit',
style: TextStyle(
fontFamily: 'Changa',
fontWeight: FontWeight.w600,
fontSize: 36.0,
color: Colors.black87),
),
titleSpacing: -4.0,
leading: IconButton(
icon: Image.asset('assets/images/new_logo.png'),
onPressed: () {},
),
floating: true,
actions: [
Padding(
padding: const EdgeInsets.only(right: 12.0),
//TODO build filter functionality
child: IconButton(
icon: Icon(Mdi.accountDetailsOutline,
color: Colors.black87, size: 30.0),
onPressed: null),
)
],
),
Just pass text style not in Text widget in title, but in titleTextStyle.
title: Text('miit'),
titleTextStyle: TextStyle(
fontFamily: 'Changa',
fontWeight: FontWeight.w600,
fontSize: 36.0,
color: Colors.black87),