Flutterを使用したアプリケーションの作成(5)

前言
最初の連読から本文を読むと、天気appの簡易版を書いたかもしれませんが、データのキャッシュやリストの美しさはまだ十分ではありません.本稿では,都市リストを変更し,取得したネットワークデータをファイルでキャッシュし,ネットワークデータが得られない場合に用いる.
1.宮格に変更
CityWidgetのbuildメソッドを宮格に変更したWidgetに戻す

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3),//  
        itemCount: cityList.length,
        itemBuilder: (context, index) {
          return ListTile(
            title:Text(
                          cityList[index].name,
                          style: TextStyle(color: Colors.white, fontSize: 22))
         
              ),
            onTap: () {
              //    
// Navigator.pushNamed(context, "weather");
              //       
              Navigator.push<String>(context,
                  MaterialPageRoute(builder: (context) =>
                      WeatherWidget(cityList[index].name)))
                  .then((String value) {
                //       
              });
            },
          );
        }
    );

}

2.カードカードの追加:

 @override
  Widget build(BuildContext context) {
    return GridView.builder(
        gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3),
        itemCount: cityList.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: new Card(
              elevation: 5.0, //    
              shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(14.0))),
              semanticContainer: true,
              //        ，false      child,  view        
              child: new Scaffold(
                body: new Stack(
                  fit: StackFit.expand,
                  children: <Widget>[
                    Image.asset("images/item_bg.jpg", fit: BoxFit.fitHeight),
                    Center(
                      child: Text(
                          cityList[index].name,
                          style: TextStyle(color: Colors.white, fontSize: 22)),)
                  ],),
              ),),
            onTap: () {
              //    
// Navigator.pushNamed(context, "weather");
              //       
              Navigator.push<String>(context,
                  MaterialPageRoute(builder: (context) =>
                      WeatherWidget(cityList[index].name)))
                  .then((String value) {
                //       
              });
            },
          );
        }
    );
}

3.キャッシュを追加
キャッシュはローカルファイルに保存する準備ができています.依存を追加する必要があります.

path_provider: ^0.5.0+1

CityDataにパッケージをインポートするには、次の手順に従います.

import 'dart:io';
import 'dart:async';
import 'package:path_provider/path_provider.dart';
import 'dart:convert';

キャッシュファイルの作成

static Future<File> getCacheFile() async {
  String dir = (await getApplicationDocumentsDirectory()).path;
  return new File('$dir/cities.txt');
}

ローカルにキャッシュ

static void saveToLocal(String cityListJson) async {
  var file = await getCacheFile();
  file.writeAsString(cityListJson);
}

ローカルから都市リストを取得

static Future<List<CityData>> getCitiesFromLocal() async {
  List<CityData> list = new List();
  try {
    dynamic content = (await getCacheFile()).readAsString();
    var cityJson = await json.decode(content);

    for (dynamic city in cityJson['HeWeather6'][0]['basic']) {
      CityData cityData = CityData(name: city['location']);
      list.add(cityData);
    }
    return list;
  } catch (e) {
    return list;
  }
}

CityWidgetにキャッシュ機能を追加する

Future<List<CityData>> _futureGetCityList() async {
    ......

    if (response.statusCode == HttpStatus.OK) {
     ......
      //     
      CityData.saveToLocal(responseBody);
    }
  } catch (exception) {
    print(exception.toString());
  }

  if (data.isEmpty) {
    //     
    data.addAll((await CityData.getCitiesFromLocal()));
  }

  return data;
}

締めくくり
ここまで宮格+カード+キャッシュはもう分かち合って終わりました.効果はまあまあです.文章を読むあなたが好きになってほしいです.