Stream pour API en provenance de PHP au flutter (pas Firebase)

Question

Disons que j'ai une API - exemple: https://jsonplaceholder.typicode.com/postss

Maintenant, je souhaite appliquer Streambuilder avec une liste de répertorie. Comment puis-je configurer? Comment créer un flux pour cela?

J'ai totalement compris le ruisseau Firebase et Firestore. Je veux comprendre si j'ai une API venant de PHP et je souhaite construire un streambuilder, comment puis-je le faire.

Answer 1

S'il vous plaît faire référence à ce doc https://blog.khophi.co/usant-refreshindicator-with-flutter-streambuilder/

Il y a aussi une vidéo dedans

gitHub Code https://github.com/seanmavley/refreshindicator-with-streambuilder/blob/master/lib/Main.dart

exemple complet Code

import 'package:flutter/material.Dart';
import 'package:http/http.Dart' as http;
import 'Dart:async';
import 'Dart:convert';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Basic Project',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  StreamController _postsController;
  final GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();

  int count = 1;

  Future fetchPost([howMany = 5]) async {
    final response = await http.get(
        'https://blog.khophi.co/wp-json/wp/v2/posts/?per_page=$howMany&context=embed');

    if (response.statusCode == 200) {
      return json.decode(response.body);
    } else {
      throw Exception('Failed to load post');
    }
  }

  loadPosts() async {
    fetchPost().then((res) async {
      _postsController.add(res);
      return res;
    });
  }

  showSnack() {
    return scaffoldKey.currentState.showSnackBar(
      SnackBar(
        content: Text('New content loaded'),
      ),
    );
  }

  Future<Null> _handleRefresh() async {
    count++;
    print(count);
    fetchPost(count * 5).then((res) async {
      _postsController.add(res);
      showSnack();
      return null;
    });
  }

  @override
  void initState() {
    _postsController = new StreamController();
    loadPosts();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: scaffoldKey,
      appBar: new AppBar(
        title: new Text('StreamBuilder'),
        actions: <Widget>[
          IconButton(
            tooltip: 'Refresh',
            icon: Icon(Icons.refresh),
            onPressed: _handleRefresh,
          )
        ],
      ),
      body: StreamBuilder(
        stream: _postsController.stream,
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          print('Has error: ${snapshot.hasError}');
          print('Has data: ${snapshot.hasData}');
          print('Snapshot Data ${snapshot.data}');

          if (snapshot.hasError) {
            return Text(snapshot.error);
          }

          if (snapshot.hasData) {
            return Column(
              children: <Widget>[
                Expanded(
                  child: Scrollbar(
                    child: RefreshIndicator(
                      onRefresh: _handleRefresh,
                      child: ListView.builder(
                        physics: const AlwaysScrollableScrollPhysics(),
                        itemCount: snapshot.data.length,
                        itemBuilder: (context, index) {
                          var post = snapshot.data[index];
                          return ListTile(
                            title: Text(post['title']['rendered']),
                            subtitle: Text(post['date']),
                          );
                        },
                      ),
                    ),
                  ),
                ),
              ],
            );
          }

          if (snapshot.connectionState != ConnectionState.done) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }

          if (!snapshot.hasData &&
              snapshot.connectionState == ConnectionState.done) {
            return Text('No Posts');
          }
        },
      ),
    );
  }
}

votre classe JSON en PHP

// To parse this JSON data, do
//
//     final payload = payloadFromJson(jsonString);

import 'Dart:convert';

List<Payload> payloadFromJson(String str) => new List<Payload>.from(json.decode(str).map((x) => Payload.fromJson(x)));

String payloadToJson(List<Payload> data) => json.encode(new List<dynamic>.from(data.map((x) => x.toJson())));

class Payload {
    int userId;
    int id;
    String title;
    String body;

    Payload({
        this.userId,
        this.id,
        this.title,
        this.body,
    });

    factory Payload.fromJson(Map<String, dynamic> json) => new Payload(
        userId: json["userId"],
        id: json["id"],
        title: json["title"],
        body: json["body"],
    );

    Map<String, dynamic> toJson() => {
        "userId": userId,
        "id": id,
        "title": title,
        "body": body,
    };
}

Answer 2

Après beaucoup de recherches, j'ai essayé de résoudre le mien avec ce code ci-dessousCe code résolve des données en direct de API

import 'package:flutter/material.Dart';
import 'Dart:async';
import 'Dart:convert';
import 'package:flutter/material.Dart';
import 'package:live_data_stream/provider/Api.Dart';
import 'package:live_data_stream/provider/model/AuthModel.Dart';

class DetailsView extends StatefulWidget {
  @override
  _DetailsViewState createState() => _DetailsViewState();
}

class _DetailsViewState extends State<DetailsView> {
  StreamController<AuthModel> _userController;
  final GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: new AppBar(
        title: new Text('StreamBuilder Demo'),
        actions: <Widget>[
          IconButton(
            tooltip: 'Refresh',
            icon: Icon(Icons.refresh),
            onPressed: _handleRefresh,
          )
        ],
      ),
      body: StreamBuilder(
        stream: _userController.stream,
        builder: (BuildContext context, AsyncSnapshot<AuthModel> snapshot) {
         switch(snapshot.connectionState){
           case ConnectionState.none:
             return Center(
               child: Text('None'),
             );
             break;
           case ConnectionState.waiting:
             return Center(
               child: CircularProgressIndicator(),
             );
             break;
           case ConnectionState.active:
             return Center(
               child:  Text(
                 snapshot.data.fname == null ? 'Null' : snapshot.data.fname,
                 style: Theme.of(context).textTheme.display1,
               ),
             );
             break;
           case ConnectionState.done:
             print('Done is fucking here ${snapshot.data}');
             if(snapshot.hasData){
               return Center(
                 child:  Text(
                   snapshot.data.fname == null ? 'Null' : snapshot.data.fname,
                   style: Theme.of(context).textTheme.display1,
                 ),
               );
             }else if(snapshot.hasError){
               return Text('Has Error');
             }else{
               return Text('Error');
             }
             break;
         }
         return Text('Non in Switch');
        },
      ),
    );
  }
  @override
  void initState() {
    _userController = new StreamController();
    Timer.periodic(Duration(seconds: 1), (_) => loadDetails());
   // loadDetails();
    super.initState();
  }
  int count = 1;

  loadDetails() async {
    Api().getUserInfo('[email protected]', '123456').then((res) async{
      print('LoadDetails of ${res.fname}');
      _userController.add(res);
      return res;
    });
  }

  showSnack() {
    return scaffoldKey.currentState.showSnackBar(
      SnackBar(
        content: Text('New content loaded'),
      ),
    );
  }

  Future<Null> _handleRefresh() async {
    count++;
    print(count);
    Api().getUserInfo('[email protected]', 'APP-1571216683-766').then((res) async {
      print('New Data of ${res.fname}');
      _userController.add(res);
      showSnack();
      return null;
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _userController.close();
  }
}