Flutter:PostgreSQLでCRUDを行う方法パート2

今日は、次のようなエキサイティングなトピックを紹介します。

  • Postgresqlを統合したDartとAqueductを使用して、WebサーバーでRESTful APIを構築する方法。
  • Flutterモバイルアプリを構築し、Aqueductアプリケーションで基本的なCRUD機能を実行する方法。 あなたはここにいます

前の投稿から、Aqueduct with Postgresqlを使用してRESTful APIを実装するためにWebサーバーをセットアップする方法を共有しました。この投稿では、フラッターアプリの構築を開始して、Webアプリケーションとやり取りします。

Flutterプロジェクトのセットアップ方法

flutter_crud_demoを呼び出す新しいFlutterプロジェクトを作成します。 Visual Studio Codeを使用している場合は、[表示]> [コマンドパレット]> [新しいプロジェクトをフラッター]> [プロジェクト名を入力]> [プロジェクトを保存するディレクトリを選択]で新しいプロジェクトを作成できます。ワークスペースの初期化が完了したら、widget_test.dartを削除し、main.dartのコンテンツを空にします。

読み取り機能

未来のビルダー

Future Builderでは、データのリストを非同期で取得するとすぐにリストビューをレンダリングできます。 Futureビルダーには2つのパラメーターがあります。1つはデータのリストを取得するために使用するfutureメソッドであるfutureです。もう1つはデータで構築するものです。 future builderを使用すると、データの準備ができる前にCircularProgressIndicatorをユーザーに表示し、フェッチが完了するとListViewを表示できます。足場本体で、次のコードに置き換えます。

body:新しいコンテナ(
  子:新しいFutureBuilder >(
    future:getAll()、
    ビルダー:(コンテキスト、スナップショット){

      if(snapshot.hasData){
        新しいListView.builder(
          itemCount:snapshot.data.length、
          itemBuilder:(コンテキスト、インデックス){
            新しい列を返します
              crossAxisAlignment:CrossAxisAlignment.start、
              子: [
                新しいテキスト(snapshot.data [index] .name、
                  スタイル:新しいTextStyle(fontWeight:FontWeight.bold))、
                new Divider()
              ]
            );
          }
        );
      } else if(snapshot.hasError){
        新しいText( "$ {snapshot.error}");を返します。
      }

      //デフォルトでは、ロードスピナーを表示します
      新しいCircularProgressIndicator()を返します。
    }、
  )、
)、

次に、Webサーバーからヒーローのリストを取得するgetAll()メソッドを実装する必要があります。このメソッドは、ヒーローのFutureofタイプリストを返します。関数内で、awaithttp.get(_heroesUrl)を呼び出して呼び出します。 Awaitを使用すると、応答を待ってから次の行に進むことができます。メソッド内でawaitを使用するには、関数getAll()をasyncでマークする必要があります。応答から、本文メッセージを取得し、

Future > getAll()async {
  最終応答= http.get(_heroesUrl)を待つ;
  print(response.body);
  リストresponseJson = json.decode(response.body.toString());
  List  userList = createHeroesList(responseJson);
  return userList;
}

いくつかのヘルパー関数のためにいくつかのライブラリをインポートする必要があります。

import 'dart:convert';
import 'dart:async';
'package:http / http.dart'をhttpとしてインポートします。

クラスコールヒーローを作成しましょう。このクラスは、idの整数と文字列を名前として受け取ります。

クラスヒーロー{
  ヒーロー({this.id、this.name});
  最終的なint id;
  文字列名;
}

クラス_MyHomePageState内に、静的なconst _heroesUrlを追加して、ローカルホストのURLを含めます。

static const _heroesUrl = 'http:// localhost:8888 / heroes';

Flutterアプリを実行しましょう。また、aqueduct serveコマンドを使用してWebサーバーアプリケーションを起動することを忘れないでください。

Flutterアプリでヒーローのリストを取得できます

削除機能

ここからは、すべてのhttpリクエストのステータスを保存する列挙型を導入します。すべてのHTTP要求は、タイプHttpRequestStatusを返す必要があります。

列挙型HttpRequestStatus {
  まだ完成してない、
  完了、
  エラー
}

却下可能

スワイプによる削除を実装します。これは、モバイルアプリでよく見られるパターンです。これを行うには、下に示すようにColumnをDismissibleに交換します。次に、onDismissedパラメータのIDでヒーローを削除するようリクエストします。メソッドdeleteHeroは、httpRequestStatusであるfutureを返します。ステータスが完了したら、setState()を使用して画面の再描画を要求します。

新しいListView.builder(
    itemCount:snapshot.data.length、
    itemBuilder:(コンテキスト、インデックス){
      var item = snapshot.data [index];

      Dismissible(
        キー:Key(item.id.toString())、
        onDismissed:(direction)async {
          httpRequestStatus = await deleteHero(item.id);
          if(httpRequestStatus == HttpRequestStatus.DONE){
            setState((){
              snapshot.data.removeAt(index);
            });
          }
        }、
        背景:コンテナ(色:Colors.red)、
        子:ListTile(title:Text( '$ {item.name}'))、
      );
    });

メソッドdeleteHeroは次のとおりです。

将来のdeleteHero(int id)async {
  httpRequestStatus = HttpRequestStatus.NOT_DONE;
  最終URL = '$ _heroesUrl / $ id';
  最終応答= await http.delete(url、headers:_headers);
  if(response.statusCode == 200){
    print(response.body.toString());
    httpRequestStatus = HttpRequestStatus.DONE;
  } else {
    httpRequestStatus = HttpRequestStatus.ERROR;
  }

  return httpRequestStatus;
}
スワイプしてヒーローを削除します

機能を追加

AppBarの下にウィジェットアイコンを追加して、ユーザーがヒーローを追加できるようにします。

appBar:新しいAppBar(
  title:new Text( 'Flutter CRUD Demo')、
  アクション: [
    IconButton(
      icon:Icon(Icons.add)、
      onPressed:_addHeroService、
      ツールチップ:「新しいヒーローを追加」、
    )
  ]、
)、

_addHeroServiceで、_openDialogAddHeroを呼び出して、ヒーロー名のユーザー入力用の新しい画面をプッシュします。このメソッドは新しいヒーロー名を返します。それからcreateHeroを呼び出し、ヒーロー名が正常に更新された場合、setState()を呼び出して画面を再描画します。

void _addHeroService()async {
  文字列名= await _openDialogAddHero();
  HttpRequestStatus httpRequestStatus = await createHero(name);
  if(httpRequestStatus == HttpRequestStatus.DONE){
    setState((){
      
    });
  }
}

静的const _headersを追加して、httpヘッダーのコンテンツタイプを保存します。

static final _headers = {'Content-Type': 'application / json'};

以下は、新しいヒーローの作成要求をWebサーバーアプリケーションに送信するコードです。

将来のcreateHero(String name)async {
  httpRequestStatus = HttpRequestStatus.NOT_DONE;
  最終応答= http.post(_heroesUrl、
      ヘッダー:_headers、本文:json.encode({'name':name}));
  if(response.statusCode == 200){
    print(response.body.toString());
    httpRequestStatus = HttpRequestStatus.DONE;
  } else {
    httpRequestStatus = HttpRequestStatus.ERROR;
  }

  return httpRequestStatus;
}
今すぐ新しいヒーローを追加できます

更新機能

最後に、ヒーロー名を更新する機能である最後の機能が残っています。ユーザーが既存のヒーローをタップして名前を更新するようにします。このために、リストのそのインデックスでヒーローのIDと名前を渡して、メソッド_updateHeroServiceを呼び出すonTapをListTile内に追加します。ポップアップダイアログから名前を取得してupdateHeroに渡す_addHeroServiceに似ています。 updateHeroが成功すると、画面が再描画されます。

Future _updateHeroService(int id、String name)async {
  String updatedName = await _openDialogUpdateHero(id、name);
  HttpRequestStatus httpRequestStatus = await updateHero(id、updatedName);
  if(httpRequestStatus == HttpRequestStatus.DONE){
    print(httpRequestStatus.toString());
    setState((){
      
    });
  }
}

以下はupdateHeroのコードです

将来のupdateHero(int id、String name)async {
  httpRequestStatus = HttpRequestStatus.NOT_DONE;
  最終URL = '$ _heroesUrl / $ id';
  最終応答= http.put(url、
      ヘッダー:_headers、本文:json.encode({'id':id、 'name':name}));
  if(response.statusCode == 200){
    print(response.body.toString());
    httpRequestStatus = HttpRequestStatus.DONE;
  } else {
    httpRequestStatus = HttpRequestStatus.ERROR;
  }
}
ホークアイをトールと交換しましょう

まとめとして、RESTful apiを実装するWebサーバーアプリケーションの構築方法を説明し、PostgreSQLで基本的なCRUD機能を実行するFlutterアプリを構築する方法を説明しました。

Github

https://github.com/tattwei46/flutter_crud_postgresql

この記事が有用で教育的なものであると思う場合は、今後この記事をもっと書くよう奨励するために、いくつかの記事を書いてください。

Flutter Pubは、この素晴らしいテクノロジーに関する記事、ビデオ、コード、ポッドキャストなどの最新の素晴らしいリソースを提供する中規模の出版物で、美しいアプリを構築する方法をお教えします。 Facebook、Twitter、Mediumで見つけるか、こちらで詳細をご覧ください。接続したいと思います!そして、あなたが私たちのために書くことに興味のある作家なら、あなたはこれらのガイドラインを通してそうすることができます。