title: Flutter - Saving user data
body: <p>I'm currently creating an application that tracks general crypto data, along with this data we also post news articles tailored to crypto enthusiasts. Every aspect of this news article data is stored in string form, from image url to date published - <strong>full list below</strong>. </p>
  
  <p>I'm looking for a way to save this data to the user's device. In a perfect situation I'd just have this data saved in a JSON array, but apart from not knowing how to perform this, I'm not sure if it's the most efficient way to save this data for later display.</p>
  
  <p>If you decide that JSON would be the best way of saving this data, all I need to know is how to properly manage this data into an array of different saved articles and how to import this properly into my Dart code. </p>
  
  <p>An example of this code would be great, I'm looking to publish this app before the new year so I need all the help I can get. Many thanks.</p>
  
  <p>This is the aforementioned data I'm looking to save / display from <a href="https://newsapi.org/v2/top-headlines?sources=crypto-coins-news&amp;apiKey=d40a757cfb2e4dd99fc511a0cbf59098" rel="nofollow noreferrer">this source</a>:</p>
  
  <ul>
  <li>Source - <code>source</code></li>
  <li>Author - <code>author</code></li>
  <li>Description - <code>description</code></li>
  <li>Date Published - <code>publishedAt</code></li>
  <li>Article Title - <code>title</code></li>
  <li>Url to Article - <code>url</code></li>
  <li>Article Image - <code>urlToImage</code></li>
  </ul>
  
  <p><strong>Edit</strong>: Trying to rework shadowsheep's answer to fit an index model</p>
  
  <p>Each news widget is a new <code>inkwell</code> that allows a new <code>scaffold</code> to be built. From this <code>scaffold</code> you are presented with the option to save the article. On saving, the code currently just changes the value of the following strings with the <code>title</code>, <code>description</code>, <code>URL</code> and <code>Image URL</code>.</p>
  
  <ul>
  <li><code>_sTitle</code></li>
  <li><code>_sDescription</code></li>
  <li><code>_sURL</code></li>
  <li><code>_sURLtoImage</code></li>
  </ul>
  
  <p>I would really like a way of having the database, as described by shadowsheep, saved to the user's device. This means that the saved articles will become persistent on the device despite the user closing and opening the app.</p>
  
  <p>The following code is the exact use case in which I'm displaying my news data. </p>
  
  <pre><code>CarouselSlider(
   items: [1,2,3,4,5,6,7,8,9,10].map((index) {
      return  Builder(
        builder: (BuildContext context) {
          return Padding(
            padding:  EdgeInsets.only(
              top: 5.0,
              bottom: 20.0,
            ),
            child:  InkWell(
              borderRadius:  BorderRadius.only(
                topLeft: const Radius.circular(15.0),
                topRight: const Radius.circular(15.0),
              ),
              onTap: () {
                print('Opened article scaffold: "' + articles[index].title + "\"");
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) =&gt;  Scaffold(
                      resizeToAvoidBottomPadding: false,
                      appBar:  AppBar(
                        backgroundColor: const Color(0xFF273A48),
                        elevation: 0.0,
                        title: Container(
                          width: _width*0.90,
                          height: 30,
                          padding: const EdgeInsets.only(
                            bottom: 5,
                            top: 5,
                            left: 10,
                            right: 10,
                          ),
                          decoration:  BoxDecoration(
                            color: Colors.white,
                            borderRadius:  BorderRadius.all(
                                Radius.circular(10.0),
                            ),
                          ),
                          alignment: Alignment.center,
                          child:  AutoSizeText(
                            'Published ' +  DateFormat.yMMMd().format(DateTime.parse(articles[index].publishedAt)) + ", "+ DateFormat.jm().format(DateTime.parse(articles[index].publishedAt)),
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                            minFontSize: 5,
                            maxFontSize: 20,
                            textAlign: TextAlign.center,
                            style:  TextStyle(
                              color: Colors.black,
                              fontFamily: 'Poppins',
                            ),
                          ),
                        ),
                      ),
                      body: Center(
                        child:  Scaffold(
                          resizeToAvoidBottomPadding: false,
                          body: Center(
                            child: Container(
                              decoration:  BoxDecoration(
                                gradient:  LinearGradient(
                                  begin: Alignment.topCenter,
                                  end: Alignment.bottomCenter,
                                  colors: [
                                    const Color(0xFF273A48),
                                    Colors.blueGrey
                                  ],
                                ),
                              ),
                              padding: const EdgeInsets.only(
                                top: 20,
                                left: 10,
                                right: 10,
                                bottom: 50
                              ),
                              child:  Column(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: &lt;Widget&gt;[
                                    Column(
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    children: &lt;Widget&gt;[
                                        FutureBuilder&lt;Null&gt;(future: _launched, builder: _launchStatus),
                                        AutoSizeText(
                                        articles[index].title,
                                        overflow: TextOverflow.ellipsis,
                                        textAlign: TextAlign.center,
                                        maxFontSize: 30,
                                        minFontSize: 15,
                                        maxLines: 3,
                                        style:  TextStyle(
                                          color: Colors.white,
                                          fontFamily: 'Poppins',
                                        ),
                                      ),
                                        Divider(
                                        color: Colors.transparent,
                                        height: 15.0,
                                      ),
                                      Container(
                                        decoration:  BoxDecoration(
                                          borderRadius:  BorderRadius.circular(15.0),
                                          color: Colors.transparent,
                                          boxShadow: [
                                              BoxShadow(
                                              color: Colors.black.withAlpha(70),
                                              blurRadius: 50.0,
                                            )
                                          ],
                                          image:  DecorationImage(
                                            image:  NetworkImage(articles[index].urlToImage),
                                            fit: BoxFit.fitHeight,
                                          ),
                                        ),
                                        height: 220,
                                        width: 317.5,
                                      ),
                                        Divider(
                                        color: Colors.transparent,
                                        height: 15.0,
                                      ),
                                    ],
                                  ),
                                  Container(
                                    padding: const EdgeInsets.only(
                                      left: 20,
                                      right: 20
                                    ),
                                    decoration:  BoxDecoration(
                                      color: Colors.transparent,
                                      borderRadius:  BorderRadius.all(
                                          Radius.circular(10.0),
                                      ),
                                    ),
                                    child:  AutoSizeText(
                                      articles[index].description,
                                      overflow: TextOverflow.ellipsis,
                                      textAlign: TextAlign.center,
                                      maxFontSize: 30,
                                      minFontSize: 10,
                                      maxLines: 10,
                                      style:  TextStyle(
                                        color: Colors.white,
                                        fontFamily: 'Poppins',
                                      ),
                                    ),
                                    width: _width*0.90,
                                    height: _height*0.20,
                                  ),
                                  Container(
                                    padding: const EdgeInsets.all(4.0),
                                    decoration:  BoxDecoration(
                                      color: const Color(0xFF273A48),
                                      borderRadius:  BorderRadius.all(
                                          Radius.circular(10.0),
                                      ),
                                    ),
                                    child: Row(
                                      mainAxisSize: MainAxisSize.min,
                                      mainAxisAlignment: MainAxisAlignment.center,
                                      children: &lt;Widget&gt;[
                                          IconButton(
                                          icon:  Icon(
                                            Icons.favorite_border,
                                            color: Colors.red
                                          ),
                                          iconSize: 35.0,
                                          onPressed: () {
                                            _sTitle = articles[index].title;
                                            _sDescription = articles[index].description;
                                            _sURL = articles[index].url;
                                            _sURLtoImage = articles[index].urlToImage;
                                            Navigator.push(
                                            context,
                                            MaterialPageRoute(builder: (context) =&gt; _favoritesScreen())
                                            );
                                          }
                                        ),
                                          IconButton(
                                          icon:  Icon(
                                            Icons.mobile_screen_share,
                                            color: Colors.white,
                                          ),
                                          iconSize: 35.0,
                                          onPressed: () {
                                            Share.share(
                                              articles[index].title + "\n\nCheck out this article at:\n" + articles[index].url + "\n\nLearn more with Cryp - Tick Exchange",
                                            );
                                          }
                                        ),
                                          IconButton(
                                          icon:  Icon(Icons.launch, color: Colors.lightBlueAccent),
                                          iconSize: 32.5,
                                          onPressed: () =&gt; setState(() { _launched = _launchInWebViewOrVC(articles[index].url);}),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                    )
                  )
                );
              },
              child: Container(
                decoration:  BoxDecoration(
                  borderRadius:  BorderRadius.circular(10.0),
                  color: const Color(0xFF273A48),
                  boxShadow: [
                      BoxShadow(
                      color: Colors.black.withAlpha(70),
                      offset: const Offset(5.0, 5.0),
                      blurRadius: 12.5,
                    )
                  ],
                  image:  DecorationImage(
                    alignment: Alignment.topCenter,
                    image:  NetworkImage(articles[index].urlToImage),
                    fit: BoxFit.cover,
                  ),
                ),
                height: _height*0.35,
                width: _width*0.725,
                child:  Stack(
                  children: &lt;Widget&gt;[
                      Align(
                      alignment: Alignment.bottomCenter,
                      child:  Stack(
                        alignment: Alignment.bottomRight,
                        children: &lt;Widget&gt;[
                          Container(
                            padding:  EdgeInsets.only(left: 10.0, right: 10.0),
                            decoration:  BoxDecoration(
                              color: const Color(0xFF273A48),
                              borderRadius:  BorderRadius.only(
                                bottomLeft:  Radius.circular(10.0),
                                bottomRight:  Radius.circular(10.0)
                              ),
                            ),
                            height: 60.0,
                            child:  Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: &lt;Widget&gt;[
                                  Flexible(
                                  child: Container(
                                    width: _width*0.725,
                                    child:  Text(
                                      articles[index].title,
                                      textAlign: TextAlign.center,
                                      overflow: TextOverflow.ellipsis,
                                      maxLines: 2,
                                      style:  TextStyle(
                                        color: Colors.white,
                                        fontFamily: 'Poppins',
                                        ),
                                      ),
                                  ),
                                ),
                                  Text(
                                  'Published ' +  DateFormat.yMMMd().format(DateTime.parse(articles[index].publishedAt)) + ", "+ DateFormat.jm().format(DateTime.parse(articles[index].publishedAt)),
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 1,
                                  style:  TextStyle(
                                    color: Colors.blueGrey,
                                    fontSize: 10.0,
                                    fontFamily: 'Poppins',
                                ),
                              ),
                            ],
                          )
                        ),
                        Container(
                          width: 25.0,
                          height: 20.0,
                          alignment: Alignment.center,
                          child:  Text(
                            "$index",
                            textAlign: TextAlign.center,
                            style:  TextStyle(
                              color: Colors.blueGrey,
                              fontSize: 10.0,
                              fontFamily: "Poppins"
                            ),
                          )
                        ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          );
        },
      );
    }).toList(),
    height: 400,
    autoPlay: true,
  )
  </code></pre>