Wie die Arbeit mit Statusanzeige im flattern

Ich bin Neuling in flattern, und wollte wissen, was besser Weg, um CircularProgressIndicator in meinem layout. Zum Beispiel, meine login-Ansicht. In dieser Ansicht haben Sie Benutzernamen, Passwort und login-Button. Ich wollte erstellen Sie ein overlay-layout (mit Opacity), die beim laden, anzeigen Statusanzeige wie ich in NativeScript, aber ich bin etwas verwirrt, wie zu tun, und auch wenn es der bessere Weg ist. Auf NativeScript, zum Beispiel, füge ich IndicatorActivity in main layout und Satz beschäftigt, um true oder false, also es überlagern alle view-Komponenten, wenn geladen wird.

Edit:

War ich in der Lage, um dieses Ergebnis zu erreichen:

    void main() {
      runApp(new MyApp());
    }

    class MyApp extends StatelessWidget {
      //This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: 'Flutter Demo',
          theme: new ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: new MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }

    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);

      final String title;

      @override
      _MyHomePageState createState() => new _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
      bool _loading = false;

      void _onLoading() {
        setState(() {
          _loading = true;
          new Future.delayed(new Duration(seconds: 3), _login);
        });
      }


      Future _login() async{
        setState((){
          _loading = false;
        });
      }

      @override
      Widget build(BuildContext context) {


          var body = new Column(
              children: <Widget>[
                new Container(
                  height: 40.0,
                  padding: const EdgeInsets.all(10.0),
                  margin: const EdgeInsets.fromLTRB(15.0, 150.0, 15.0, 0.0),
                  decoration: new BoxDecoration(
                    color: Colors.white,
                  ),
                  child: new TextField(
                    decoration: new InputDecoration.collapsed(hintText: "username"),
                  ),
                ),
                new Container(
                  height: 40.0,
                  padding: const EdgeInsets.all(10.0),
                  margin: const EdgeInsets.all(15.0),
                  decoration: new BoxDecoration(
                    color: Colors.white,
                  ),
                  child: new TextField(
                    decoration: new InputDecoration.collapsed(hintText: "password"),
                  ),
                ),
              ],
            );


          var bodyProgress = new Container(
            child: new Stack(
              children: <Widget>[
                body,
                new Container(
                  alignment: AlignmentDirectional.center,
                  decoration: new BoxDecoration(
                    color: Colors.white70,
                  ),
                  child: new Container(
                    decoration: new BoxDecoration(
                      color: Colors.blue[200],
                      borderRadius: new BorderRadius.circular(10.0)
                    ),
                    width: 300.0,
                    height: 200.0,
                    alignment: AlignmentDirectional.center,
                    child: new Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Center(
                          child: new SizedBox(
                            height: 50.0,
                            width: 50.0,
                            child: new CircularProgressIndicator(
                              value: null,
                              strokeWidth: 7.0,
                            ),
                          ),
                        ),
                        new Container(
                          margin: const EdgeInsets.only(top: 25.0),
                          child: new Center(
                            child: new Text(
                              "loading.. wait...",
                              style: new TextStyle(
                                color: Colors.white
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          );

          return new Scaffold(
            appBar: new AppBar(
              title: new Text(widget.title),
            ),
            body: new Container(
              decoration: new BoxDecoration(
                color: Colors.blue[200]
              ),
              child: _loading ? bodyProgress : body
            ),
            floatingActionButton: new FloatingActionButton(
              onPressed: _onLoading,
              tooltip: 'Loading',
              child: new Icon(Icons.check),
            ),
          );
      }
    }

Ich bin immer noch der Anpassung an die Idee von Staaten. Dieser code ist innerhalb des erwarteten bei der Arbeit mit flattern?

Dank!

Bitte poste deinen code

InformationsquelleAutor Ricardo Bocchi | 2017-11-01

dart flutter

In flattern, gibt es ein paar Umgang mit Asynchronen Aktionen.

Einen faulen Weg, es zu tun, können Sie mit einem modal. Die Sperrung der Benutzer-Eingabe und verhindern so, dass unerwünschte Aktionen.
Dies würde erfordern sehr kleine änderungen an Ihrem code. Nur ändern Sie Ihre _onLoading etwas wie dies :

void _onLoading() {
  showDialog(
    context: context,
    barrierDismissible: false,
    child: new Dialog(
      child: new Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          new CircularProgressIndicator(),
          new Text("Loading"),
        ],
      ),
    ),
  );
  new Future.delayed(new Duration(seconds: 3), () {
    Navigator.pop(context); //pop dialog
    _login();
  });
}

Der ideale Weg, es zu tun ist mit FutureBuilder und eine stateful-widget. Das ist das, was Sie begonnen haben.
Der trick ist, dass, anstatt eine boolean loading = false in Ihrem Zustand, können Sie direkt verwenden, um eine Future<MyUser> user

Und dann übergeben Sie als argument zu FutureBuilder, die Ihnen einige Infos wie "hasData" oder die Instanz von MyUser wenn Sie fertig sind.

Dies würde dazu führen, so etwas wie dieses :

@immutable
class MyUser {
  final String name;

  MyUser(this.name);
}

class MyApp extends StatelessWidget {
  //This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future<MyUser> user;

  void _logIn() {
    setState(() {
      user = new Future.delayed(const Duration(seconds: 3), () {
        return new MyUser("Toto");
      });
    });
  }

  Widget _buildForm(AsyncSnapshot<MyUser> snapshot) {
    var floatBtn = new RaisedButton(
      onPressed:
          snapshot.connectionState == ConnectionState.none ? _logIn : null,
      child: new Icon(Icons.save),
    );
    var action =
        snapshot.connectionState != ConnectionState.none && !snapshot.hasData
            ? new Stack(
                alignment: FractionalOffset.center,
                children: <Widget>[
                  floatBtn,
                  new CircularProgressIndicator(
                    backgroundColor: Colors.red,
                  ),
                ],
              )
            : floatBtn;

    return new ListView(
      padding: const EdgeInsets.all(15.0),
        children: <Widget>[
          new ListTile(
            title: new TextField(),
          ),
          new ListTile(
            title: new TextField(obscureText: true),
          ),
          new Center(child: action)
        ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return new FutureBuilder(
      future: user,
      builder: (context, AsyncSnapshot<MyUser> snapshot) {
        if (snapshot.hasData) {
          return new Scaffold(
            appBar: new AppBar(
              title: new Text("Hello ${snapshot.data.name}"),
            ),
          );
        } else {
          return new Scaffold(
            appBar: new AppBar(
              title: new Text("Connection"),
            ),
            body: _buildForm(snapshot),
          );
        }
      },
    );
  }
}

Cool, die beiden Beispiele, die nützlich sein werden bei der Anmeldung und in anderen Situationen. Hf-Fortschritte beim dialog sieht besser aus als meine version und FutureBuilder Es ist eleganter als meine Lösung auch. danke für die Hilfe!
eine Frage off-topic.. jedem das TextField ich brauche eine TextEditingController einzigartig?
Ja
Ich glaube nicht, dass der Dialog mit dem wirklichen Beispiel, es ist verwirrend, wie wird der Benutzer umgeleitet werden, nachdem die _login() zurückgegeben wird. Dein zweites Beispiel, obwohl scheint Weg mehr bequem. Gut gebacken.
Gut, der Dialog ist funktionell und benötigt sehr wenig Veränderung in seine ursprüngliche code. Er könnte zum Beispiel Folgen Sie den dialog schließen Sie mit einem Navigator.pushNamed("/home").

InformationsquelleAutor Rémi Rousselet

Für mich eine nette Möglichkeit, dies zu tun ist, um zu zeigen, eine SnackBar an der Unterseite, während die Unterzeichnung-Im Prozess stattgefunden, dies ist ein ein Beispiel was ich meine:

Wie die Arbeit mit Statusanzeige im flattern

Hier ist, wie um den setup -SnackBar.

Definieren Sie einen globalen Schlüssel für Ihre Scaffold

final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

Fügen Sie es zu Ihrem Scaffold key Attribut

return new Scaffold(
      key: _scaffoldKey,
.......

Meine SignIn-button onPressed callback:

onPressed: () {
                  _scaffoldKey.currentState.showSnackBar(
                      new SnackBar(duration: new Duration(seconds: 4), content:
                      new Row(
                        children: <Widget>[
                          new CircularProgressIndicator(),
                          new Text("  Signing-In...")
                        ],
                      ),
                      ));
                  _handleSignIn()
                      .whenComplete(() =>
                      Navigator.of(context).pushNamed("/Home")
                  );
                }

Es hängt wirklich davon ab, wie Sie möchten, erstellen Sie Ihr layout, und ich bin nicht sicher, was Sie im Sinn haben.

Bearbeiten

Werden Sie wahrscheinlich wollen es auf diese Weise, die ich verwendet habe, ein Stapel um dieses Ergebnis zu erreichen und nur show-oder hide my Indikator basiert auf onPressed

Wie die Arbeit mit Statusanzeige im flattern

class TestSignInView extends StatefulWidget {
  @override
  _TestSignInViewState createState() => new _TestSignInViewState();
}


class _TestSignInViewState extends State<TestSignInView> {
  bool _load = false;
  @override
  Widget build(BuildContext context) {
    Widget loadingIndicator =_load? new Container(
      color: Colors.grey[300],
      width: 70.0,
      height: 70.0,
      child: new Padding(padding: const EdgeInsets.all(5.0),child: new Center(child: new CircularProgressIndicator())),
    ):new Container();
    return new Scaffold(
      backgroundColor: Colors.white,
      body:  new Stack(children: <Widget>[new Padding(
        padding: const EdgeInsets.symmetric(vertical: 50.0, horizontal: 20.0),
        child: new ListView(

          children: <Widget>[
            new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center
              ,children: <Widget>[
            new TextField(),
            new TextField(),

            new FlatButton(color:Colors.blue,child: new Text('Sign In'),
                onPressed: () {
              setState((){
                _load=true;
              });

                  //Navigator.of(context).push(new MaterialPageRoute(builder: (_)=>new HomeTest()));
                }
            ),

            ],),],
        ),),
        new Align(child: loadingIndicator,alignment: FractionalOffset.center,),

      ],));
  }

}

Hi, das ist, was ich tun wollte, aber ich war nicht immer das layout, den ich brauchte. Stack ist die Antwort. Über StatefulWidget, ist es richtig erstellen, alle anzeigen, wenn Fortschritte Zustand zu ändern?
Hey, ich verstehe deine Frage nicht?
In meinem code, wenn _loading ändern, alle Ansichten neu erstellen. Ist das so?
Mit einem modal ist wahrscheinlich viel einfacher und intuitiver in der gleichen Zeit. Sie können nur schieben ein laden-dialog am Anfang oder Ihre Anfrage, und es knallen, wenn Sie fertig sind. Es hat auch den Vorteil der Vermeidung einer weiteren Benutzereingabe.
Okey, lass mich Backen etwas.

InformationsquelleAutor aziza

1. Ohne plugin

    class IndiSampleState extends State<ProgHudPage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Demo'),
        ),
        body: Center(
          child: RaisedButton(
            color: Colors.blueAccent,
            child: Text('Login'),
            onPressed: () async {
              showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return Center(child: CircularProgressIndicator(),);
                  });
              await loginAction();
              Navigator.pop(context);
            },
          ),
        ));
  }

  Future<bool> loginAction() async {
    //replace the below line of code with your login request
    await new Future.delayed(const Duration(seconds: 2));
    return true;
  }
}

2. Mit plugin

prüfen Sie dieses plugin progress_hud

fügen Sie die Abhängigkeit in der pubspec.yaml-Datei

dev_dependencies:
  progress_hud:

importieren Sie das Paket

import 'package:progress_hud/progress_hud.dart';

Beispiel-code ist unten angegeben, um zu zeigen, und blenden Sie die Anzeige

class ProgHudPage extends StatefulWidget {
  @override
  _ProgHudPageState createState() => _ProgHudPageState();
}

class _ProgHudPageState extends State<ProgHudPage> {
  ProgressHUD _progressHUD;
  @override
  void initState() {
    _progressHUD = new ProgressHUD(
      backgroundColor: Colors.black12,
      color: Colors.white,
      containerColor: Colors.blue,
      borderRadius: 5.0,
      loading: false,
      text: 'Loading...',
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('ProgressHUD Demo'),
        ),
        body: new Stack(
          children: <Widget>[
            _progressHUD,
            new Positioned(
                child: RaisedButton(
                  color: Colors.blueAccent,
                  child: Text('Login'),
                  onPressed: () async{
                    _progressHUD.state.show();
                    await loginAction();
                    _progressHUD.state.dismiss();
                  },
                ),
                bottom: 30.0,
                right: 10.0)
          ],
        ));
  }

  Future<bool> loginAction()async{
    //replace the below line of code with your login request
    await new Future.delayed(const Duration(seconds: 2));
    return true;
  }
}

Wählt nicht diese nach unten, dass einige Leute nicht wollen, behandeln Sie die nitty-gritty details des UI und bin einer von Ihnen, so ist dieses plugin sehr praktisch,
Seine nicht funktioniert.
der Fortschrittsbalken in der api ist fair genug, das hinzufügen von Abhängigkeiten erhöht die build-Größe. schon flattern bauen ist übertrieben.
Sollten Sie wirklich fügen Sie diese als Dev-Dependency?
Dieses plugin funktioniert nicht!!!

InformationsquelleAutor Shyju M

5

Erstellen Sie eine bool isLoading und legen Sie es auf false. Mit Hilfe des ternären operators, Wenn der Benutzer klickt auf den login-button set Zustand isLoading zu true. Erhalten Sie kreisförmige Ladeanzeige anstelle der login-Schaltfläche
```
 isLoading ? new PrimaryButton(
                      key: new Key('login'),
                      text: 'Login',
                      height: 44.0,
                      onPressed: SetState((){isLoading = ture;}))
                  : Center(
                      child: CircularProgressIndicator(),
                    ),
```
Sehen Sie Screenshots, wie es aussieht, während vor login geklickt

Nach dem login geklickt

In der mittleren Zeit, die Sie ausführen können login-Prozess und den Benutzer login. Wenn der Benutzer Anmeldeinformationen falsch sind, dann wieder Sie setState von isLoading zu false, so dass die Ladeanzeige unsichtbar und login-button sichtbar zu Anwender.
Durch die Art und Weise, primaryButton, die im code verwendet ist meine benutzerdefinierte Schaltfläche. Sie können dasselbe tun mit OnPressed im button.

Das ist eigentlich ziemlich smart! Keine Notwendigkeit, zu behandeln, Doppelklick etc. Danke.

InformationsquelleAutor Harsha pulikollu
3

Nahm ich den folgenden Ansatz, der verwendet eine einfache modale Fortschritts-Anzeige-widget, das umschließt, was Sie machen wollen, modal bei einem asynchronen Aufruf.

Beispiel in dem Paket auch Adressen, wie zu handhaben Formular-Validierung während asynchrone Aufrufe überprüfen Sie die form (siehe flattern/Themen/9688 für details zu diesem problem). Zum Beispiel, ohne aus der form, diese asynchrone form validation-Methode kann überprüft werden, ob Sie einen neuen Benutzernamen mit der vorhandenen Namen in einer Datenbank, während der Anmeldung.

https://pub.dartlang.org/packages/modal_progress_hud

Hier ist die demo von dem Beispiel mit dem Paket (mit source code):

Beispiel könnten angepasst werden, um andere modal-Statusanzeige Verhalten (wie verschiedene Animationen, zusätzlichen text im modal, etc..).

InformationsquelleAutor mmccabe

Dies ist meine Lösung mit dem stack

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:async';

final themeColor = new Color(0xfff5a623);
final primaryColor = new Color(0xff203152);
final greyColor = new Color(0xffaeaeae);
final greyColor2 = new Color(0xffE8E8E8);

class LoadindScreen extends StatefulWidget {
  LoadindScreen({Key key, this.title}) : super(key: key);
  final String title;
  @override
  LoginScreenState createState() => new LoginScreenState();
}

class LoginScreenState extends State<LoadindScreen> {
  SharedPreferences prefs;

  bool isLoading = false;

  Future<Null> handleSignIn() async {
    setState(() {
      isLoading = true;
    });
    prefs = await SharedPreferences.getInstance();
    var isLoadingFuture = Future.delayed(const Duration(seconds: 3), () {
      return false;
    });
    isLoadingFuture.then((response) {
      setState(() {
        isLoading = response;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(
            widget.title,
            style: TextStyle(color: primaryColor, fontWeight: FontWeight.bold),
          ),
          centerTitle: true,
        ),
        body: Stack(
          children: <Widget>[
            Center(
              child: FlatButton(
                  onPressed: handleSignIn,
                  child: Text(
                    'SIGN IN WITH GOOGLE',
                    style: TextStyle(fontSize: 16.0),
                  ),
                  color: Color(0xffdd4b39),
                  highlightColor: Color(0xffff7f7f),
                  splashColor: Colors.transparent,
                  textColor: Colors.white,
                  padding: EdgeInsets.fromLTRB(30.0, 15.0, 30.0, 15.0)),
            ),

            //Loading
            Positioned(
              child: isLoading
                  ? Container(
                      child: Center(
                        child: CircularProgressIndicator(
                          valueColor: AlwaysStoppedAnimation<Color>(themeColor),
                        ),
                      ),
                      color: Colors.white.withOpacity(0.8),
                    )
                  : Container(),
            ),
          ],
        ));
  }
}

InformationsquelleAutor kokemomuke

0

Können Sie FutureBuilder-widget statt. Dieses argument muss eine Zukunft. Dann können Sie ein snapshot ist der Zustand zu der Zeit wird der async-Aufruf bei der Anmeldung, sobald es endet, der Status der asynchronen Funktion wird aktualisiert und der Zukunft-generator erstellen Sie sich so kann man dann Fragen, für den neuen Staat.
```
FutureBuilder(
  future:  myFutureFunction(),
  builder: (context, AsyncSnapshot<List<item>> snapshot) {
    if (!snapshot.hasData) {
      return Center(
        child: CircularProgressIndicator(),
      );
    } else {
     //Send the user to the next page.
  },
);
```
Hier haben Sie ein Beispiel, wie man eine Zukunft bauen,
```
Future<void> myFutureFunction() async{
 await callToApi();}
```
InformationsquelleAutor Matias

class Loader extends StatefulWidget {
      @override
      State createState() => LoaderState();
    }

    class LoaderState extends State<Loader> with SingleTickerProviderStateMixin {
      AnimationController controller;
      Animation<double> animation;

      @override
      void initState() {
        super.initState();
        controller = AnimationController(
            duration: Duration(milliseconds: 1200), vsync: this);
        animation = CurvedAnimation(parent: controller, curve: Curves.elasticOut);
        animation.addListener(() {
          this.setState(() {});
        });
        animation.addStatusListener((AnimationStatus status) {});
        controller.repeat();
      }

      @override
      void dispose() {
        controller.dispose();
        super.dispose();
      }

      @override
      Widget build(BuildContext context) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 3.0,
              width: animation.value * 100.0,
            ),
            Padding(
              padding: EdgeInsets.only(bottom: 5.0),
            ),
            Container(
              color: Colors.blue[300],
              height: 3.0,
              width: animation.value * 75.0,
            ),
            Padding(
              padding: EdgeInsets.only(bottom: 5.0),
            ),
            Container(
              color: Colors.blue,
              height: 3.0,
              width: animation.value * 50.0,
            )
          ],
        );
      }
    }


    Expanded(
                        child: Padding(
                          padding:
                              EdgeInsets.only(left: 20.0, right: 5.0, top:20.0),
                          child: GestureDetector(
                            onTap: () {
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                      builder: (context) => FirstScreen()));
                            },
                            child: Container(
                                alignment: Alignment.center,
                                height: 45.0,
                                decoration: BoxDecoration(
                                    color: Color(0xFF1976D2),
                                    borderRadius: BorderRadius.circular(9.0)),
                                child: Text('Login',
                                    style: TextStyle(
                                        fontSize: 20.0, color: Colors.white))),
                          ),
                        ),
                      ),

Wie kann ich kombinieren eine Klasse, erstellt eine Ladeanzeige mit meiner Schaltfläche, so dass, wenn ich drücken Sie es, die Anzeige leuchtet auf und blättert auf die nächste Seite ?

InformationsquelleAutor Max Zubko

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.