How to save ThemeData in flutter

201 views Asked by At

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

There are 0 answers