title: How to save ThemeData in flutter
body: <p>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?</p>
  <p>Here is my code:</p>
  <p>The ThemeData list:</p>
  <p>I also have two ThemeData which is added by default.</p>
  <pre><code>List&lt;ThemeData&gt; toReturnTheme = &lt;ThemeData&gt;[];
  
  List&lt;ThemeData&gt; 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);
  }
  </code></pre>
  <p>The Button that adds the new ThemeData to the list:</p>
  <pre><code>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(
                                      &quot;themeCreated&quot;.tr().toString(),
                                    ));
                                ScaffoldMessenger.of(context)
                                    .showSnackBar(snackBar);
                              } catch (e) {
                                final snackBar = SnackBar(
                                    behavior: SnackBarBehavior.floating,
                                    backgroundColor: Colors.redAccent,
                                    content: Text(
                                      &quot;chooseValidColors&quot;.tr().toString(),
                                    ));
                                ScaffoldMessenger.of(context)
                                    .showSnackBar(snackBar);
                              }
                              setState(() {});
                            },
                            child: Text(
                              &quot;createNewTheme&quot;.tr().toString(),
                              style: TextStyle(
                                color: Theme.of(context).accentColor,
                                fontSize: 25.0,
                              ),
                            )),
                      ),
  </code></pre>
  <p>And the ListView that displays the list of ThemeData:</p>
  <pre><code>Container(
                        width: MediaQuery.of(context).size.width / 2,
                        height: 100,
                        child: ListView.builder(
                            shrinkWrap: true,
                            itemCount: toReturnTheme.length,
                            itemBuilder: (context, int index) {
                              if (index &lt; 2) {
                                return Container();
                              } else {
                                return Container(
                                  child: Column(
                                    children: [
                                      ListTile(
                                        title: GestureDetector(
                                          child: Text(
                                            toReturnTheme[index]
                                                        .textTheme
                                                        .bodyText1!
                                                        .fontFamily
                                                        .toString() ==
                                                    &quot;&quot;
                                                ? &quot;Custom Theme&quot;
                                                : 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,
                                        ),
                                      ),
                                    ],
                                  ),
                                );
                              }
                            }),
                      ),
  </code></pre>