Flutter Circularprogressindicator(dairesel İlerleme Göstergesi) Ve Kullanımı

Merhaba gönül dostları, bu postta başlıkta yazdığı gibi CircularProgressIndicator kullanımını göstereceğim. Ben FutureBuilder içerisinde kullandım, örnek de bu şekilde olacak. Kullanımı son derece basit. Hemen örneğe geçelim ;

  @override
  Widget build(BuildContext context) {
    var futureBuilder = new FutureBuilder(
      future: api.getHeaders(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState != ConnectionState.done) {
          return Center(
            child: CircularProgressIndicator(valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),),
          );
        } else if (snapshot.hasError) {
          return new Text('Error : ${snapshot.error}');
        } else {
          return createListView(context, snapshot);
        }
      },
    );

    return Scaffold(
      body: futureBuilder,
      appBar: AppBar(
        title: Text(
          'title',
        ),
      ),
    );
  }

Büyük resmi görebilmemiz için şu anda yapmakta olduğum projeden genel yapıyı kopyala yapıştır yaptım fakat bu post için işimize yarayacak kısım aslında şu:

builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.connectionState != ConnectionState.done) {
        return Center(
        child: CircularProgressIndicator(valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),),
        );
    } else if (snapshot.hasError) {
        return new Text('Error : ${snapshot.error}');
    } else {
        return createListView(context, snapshot);
    }
},

Görüldüğü gibi snapshot.connectionState != ConnectionState.done ifadesi ile bağlantının işinin bitip bitmediğini kontrol ediyoruz. Eğer işimiz hala devam ediyorsa göstergemizi göstermemiz gerektiğini biliyor ve onu da child: CircularProgressIndicator(valueColor: new AlwaysStoppedAnimation< Color>(Colors.red),), şeklinde çok çağırıyoruz. Göstergenizin rengini parametreyi değiştirerek istediğiniz renge çevirebilirsiniz. Ekranda ortalamak için Center() içerisinde almayı unutmayın. Aksi halde ekranın sol üst köşesinde dönecektir.

Sağlıcaklı kalın.