フラッタレストAPI

このFlutter Rest API Integration例では、バックエンドシステムでユーザー登録と認証を構築します.ここでは、PHP登録とログインAPIでバックエンド認証を使用しています.アプリケーション側では、共有設定でユーザー認証の状態を維持しています.以前の記事では、レトロライブラリとのフルラッターでのREST APIの統合を学びました.アクセスする前に変数を宣言する必要がある場合は、遅延修飾子をその変数に適用する必要があります.
スキャフォールドを使用したスナックバーの表示は推奨されません.ここでは、SqaffoldMessengerStateを使用したスナックバーを示しています
以下の例は、バックエンドのPHPファイル

    mysqli_connect.php
    login.php
    registration.php

以下のページを持つフロントエンド

    signin.dart
    signup.dart
    home.dart
    main.dart

HTTP呼び出しを行い、ローカルでデータを保持する必要があるので、PubSecに2つの追加パッケージを追加します.山口大

dev_dependencies:
  flutter_test:
    sdk: flutter
  http: ^0.13.3
  flutter_datetime_picker: ^1.5.1
  intl: ^0.17.0
  webview_flutter: ^2.0.9
  shared_preferences: ^2.0.6

HTTP POSTリクエストでREST APIを呼び出します

  login(email,password) async
  {



    Map data = {
      'email': email,
      'password': password
    };
    print(data.toString());
    final  response= await http.post(
        Uri.parse(LOGIN),
        headers: {
          "Accept": "application/json",
          "Content-Type": "application/x-www-form-urlencoded"
        },


        body: data,
        encoding: Encoding.getByName("utf-8")
    )  ;
    setState(() {
      isLoading=false;
    });
    if (response.statusCode == 200) {
      Map<String,dynamic>resposne=jsonDecode(response.body);
      if(!resposne['error'])
      {
        Map<String,dynamic>user=resposne['data'];
        print(" User name ${user['id']}");
        savePref(1,user['name'],user['email'],user['id']);
        Navigator.pushReplacementNamed(context, "/home");
      }else{
        print(" ${resposne['message']}");
      }
      scaffoldMessenger.showSnackBar(SnackBar(content:Text("${resposne['message']}")));

    } else {
      scaffoldMessenger.showSnackBar(SnackBar(content:Text("Please try again!")));
    }


  }

どのようにフラッタで電子メールの検証を行うには?
この残りのAPIの統合電子メールの検証は以下のようにREG式を使用して行われ、我々はまた、フラッタフォームBuider

var reg=RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+");

reg.hasMatch(_emailController.text)

上記では、REST API呼び出しをするためにHTTPパッケージを使用しました.応答を解析して、モデルクラスにJSONデータを解析するために、ここではRest API integration with Retrofit
ソースコードのダウンロード
ログインと登録によるFlutter Rest API Integration
Flutter Rest API Integration with Retofit
Flutter Rest API with Bloc state Management