flutter gridview with dynamic streamBuilder, firestore get data and bind the gridView

flutter gridview with dynamic stream builder, firestore get data and bind the gridView

Today we teach you about flutter firestore GridView Dynamic data binding or streaming.

Design flutter GridView & Binding to firestore GridView Streaming
Database services

1. Design flutter GridView: Here we teach you that, how to design endless Schroll into a flutter,

flutter gridview with dynamic streamBuilder, firestore get data and bind the gridView

import 'package:judokarateWKF/services/database_services.dart';
import 'package:judokarateWKF/src/widgets/network_image.dart';
import 'package:judokarateWKF/widgets/full_data.dart';
import 'package:flutter/material.dart';

DatabaseService db = new DatabaseService();
Map<String, dynamic> model = new Map<String, dynamic>();
class ListOfLesson extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( title: Text('judo karate WKF'), backgroundColor: Colors.deepOrange, ),
body: Column(
children: <Widget>[
Expanded(
child: StreamBuilder<dynamic>(stream: db.streamCategories(),
builder: (context, snapshot) {
if (!(snapshot.hasData)) {
return Center( child: CircularProgressIndicator(), );
} else {
return GridView( scrollDirection: Axis.vertical, controller: ScrollController(), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2),
children: List.generate( snapshot.data.documents.length, (index) {
return Card( child: Material( // elevation: 1,
child: new InkWell(
onTap: () => {
Navigator.push( context, MaterialPageRoute( builder: (context) => DataView(),
settings: RouteSettings( arguments: ScreenArguments(snapshot .data.documents[index].documentID),
),
),
),
},
child: Container(
child: Column( mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 130.0,
width: double.infinity,
child: PNetworkImage( snapshot.data.documents[index] ['imgUrl'] ?? 'http://titlemusicfilmbooks.com/wp-content/uploads/1000px-No_image_available.svg_.png', fit: BoxFit.cover),
),
SizedBox(height: 16),
Text( snapshot.data.documents[index]['title'] ?? '',
textAlign: TextAlign.center, style: TextStyle( fontSize: 12.0, ), ), ], ),
),
),
),
);
},
),
);
}
},
),
),
],
),
);
}
}

class ScreenArguments {
final String id;
ScreenArguments(this.id);
}


	flutter gridview with dynamic stream builder, firestore get data and bind the gridView

2. Database services:- Here we tell about database services were to use you connect and interact to firestore database streaming-

import 'package:cloud_firestore/cloud_firestore.dart';

class DatabaseService { 

final Firestore _db = Firestore.instance; 

// categories Stream<dynamic> streamCategories() 

{ 

return _db.collection('listing').snapshots(); 

} 

}

we make a successful design and connected to each other

any problems contact me.

About Gadgets Teach

Er. Brijesh Kumar who in a vocation spreading over more than 8 years has worked intimately with innovation announcing for probably the most regarded marks in the media area. Er. Brijesh Kumar has been included with the site since its beginning, and in November 2019, did the unbelievable, by purchasing out the site from its past promoters.