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.
  1. Design flutter GridView & Binding to firestore GridView Streaming
  2. 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
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  with example.jpg
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.
Previous
Next Post »