👫 🚣🏽 👰🏾 स्पंदन क्लाइंट सर्वर अनुप्रयोग उदाहरण 📆 👜 🍂

इस ट्यूटोरियल में, हम एक एप्लिकेशन विकसित करने जा रहे हैं जो इंटरनेट के माध्यम से डेटा प्राप्त करता है और इसे एक सूची में प्रदर्शित करता है। कुछ इस तरह

ठीक है, चलो एक परियोजना बनाकर शुरू करते हैं। कमांड लाइन पर निम्नलिखित लिखें

flutter create flutter_infinite_list

इसके बाद, हमारे निर्भरता फ़ाइल pubspec.yaml पर जाएं और हमें जो भी ज़रूरत है उसे जोड़ें

 name: flutter_infinite_list description: A new Flutter project. version: 1.0.0+1 environment: sdk: ">=2.0.0-dev.68.0 <3.0.0" dependencies: flutter: sdk: flutter flutter_bloc: 0.4.11 http: 0.12.0 equatable: 0.1.1 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true

उसके बाद, निम्न कमांड के साथ इन निर्भरताओं को स्थापित करें

 flutter packages get

इस एप्लिकेशन के लिए, हम जोसा प्लेसहोल्डर का उपयोग मोचा डेटा प्राप्त करने के लिए करेंगे। यदि आप इस सेवा से परिचित नहीं हैं, तो यह एक ऑनलाइन REST API सेवा है जो नकली डेटा भेज सकती है। एप्लिकेशन प्रोटोटाइप के निर्माण के लिए यह बहुत उपयोगी है।

निम्नलिखित लिंक को खोलकर jsonplaceholder.typicode.com/posts?_start=0&_limit=2 आप JSON प्रतिक्रिया देखेंगे जिसके साथ हम काम करेंगे।

 [ { "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" }, { "userId": 1, "id": 2, "title": "qui est esse", "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla" } ]

ध्यान दें कि हमारे GET अनुरोध में हमने पैरामीटर के रूप में प्रारंभ और समाप्ति बाधा निर्दिष्ट की है।

महान, अब हम जानते हैं कि हमारे डेटा की संरचना कैसी दिखेगी! आइए उनके लिए एक मॉडल बनाएं।

निम्नलिखित सामग्री के साथ एक पोस्ट। डार्ट फ़ाइल बनाएँ

 import 'package:equatable/equatable.dart'; class Post extends Equatable { final int id; final String title; final String body; Post({this.id, this.title, this.body}) : super([id, title, body]); @override String toString() => 'Post { id: $id }'; }

पोस्ट केवल आईडी, शीर्षक और शरीर के साथ एक वर्ग है। हम बाद में एक सुविधाजनक स्ट्रिंग प्रदर्शित करने के लिए स्ट्रोस्टिंग फ़ंक्शन को भी ओवरराइड कर सकते हैं। इसके अलावा, हम इक्विटेबल क्लास का विस्तार करते हैं ताकि हम पोस्ट ऑब्जेक्ट्स की तुलना कर सकें।

अब हमारे पास सर्वर से एक प्रतिक्रिया मॉडल है, चलो व्यापार तर्क (बिजनेस लॉजिक घटक (ब्लॉक)) को लागू करते हैं।

इससे पहले कि हम अनुप्रयोग विकास में गोता लगाएँ, हमें यह निर्धारित करने की आवश्यकता है कि हमारा पोस्टब्लॉक क्या करेगा।

शीर्ष स्तर पर, वह उपयोगकर्ता क्रियाओं को संसाधित करने (स्क्रॉल करने) और नए पदों को प्राप्त करने के लिए जिम्मेदार होगा जब प्रस्तुति परत उनसे अनुरोध करती है। आइए इसे लागू करना शुरू करते हैं।

हमारा PostBloc केवल एक घटना पर प्रतिक्रिया देगा। डेटा प्राप्त करना जो स्क्रीन पर आवश्यकतानुसार प्रदर्शित किया जाएगा। चलिए एक वर्ग post_event.dart बनाते हैं और हमारे ईवेंट को कार्यान्वित करते हैं।

 import 'package:equatable/equatable.dart'; abstract class PostEvent extends Equatable {} class Fetch extends PostEvent { @override String toString() => 'Fetch'; }

फिर से, हमारे घटना को प्रदर्शित करने वाली लाइन को और अधिक आसानी से पढ़ने के लिए फिर से परिभाषित करें। हमें वस्तुओं की तुलना करने के लिए इक्विटेबल क्लास का विस्तार करने की भी आवश्यकता है।

सारांश में, हमारे PostBloc PostEvents प्राप्त करेंगे और उन्हें PostStates में बदल देंगे। हमने सभी PostEvents (Fetch) इवेंट विकसित किए हैं, हम PostState पर आगे बढ़ेंगे।

हमारी प्रस्तुति परत में सही ढंग से प्रदर्शित करने के लिए कई राज्य होने चाहिए।

isInitializing - प्रस्तुति परत को सूचित करता है कि डेटा लोड हो रहा है, जबकि एक लोडिंग संकेतक प्रदर्शित करना आवश्यक है।

पोस्ट - पोस्ट ऑब्जेक्ट की एक सूची प्रदर्शित करता है

isrror - उस लेयर को सूचित करता है जो डेटा लोड करते समय हुई

hasRededMax - उपलब्ध पिछले रिकॉर्ड का संकेत

निम्नलिखित सामग्री के साथ पोस्ट_स्टैट.डार्ट क्लास बनाएं

 import 'package:equatable/equatable.dart'; import 'package:flutter_infinite_list/models/models.dart'; abstract class PostState extends Equatable { PostState([Iterable props]) : super(props); } class PostUninitialized extends PostState { @override String toString() => 'PostUninitialized'; } class PostInitialized extends PostState { final List<Post> posts; final bool hasError; final bool hasReachedMax; PostInitialized({ this.hasError, this.posts, this.hasReachedMax, }) : super([posts, hasError, hasReachedMax]); factory PostInitialized.success(List<Post> posts) { return PostInitialized( posts: posts, hasError: false, hasReachedMax: false, ); } factory PostInitialized.failure() { return PostInitialized( posts: [], hasError: true, hasReachedMax: false, ); } PostInitialized copyWith({ List<Post> posts, bool hasError, bool hasReachedMax, }) { return PostInitialized( posts: posts ?? this.posts, hasError: hasError ?? this.hasError, hasReachedMax: hasReachedMax ?? this.hasReachedMax, ); } @override String toString() => 'PostInitialized { posts: ${posts.length}, hasError: $hasError, hasReachedMax: $hasReachedMax }'; }

हमने सुविधा और पठनीयता के लिए फैक्टरी पैटर्न का उपयोग किया। PostState संस्थाओं को मैन्युअल रूप से बनाने के बजाय, हम विभिन्न कारखानों का उपयोग कर सकते हैं, जैसे PostState.initial ()

अब हमारे पास ईवेंट्स और स्थितियां हैं, हमारे PostBloc को बनाने का समय है
सरल बनाने के लिए, हमारे PostBloc में एक प्रत्यक्ष http क्लाइंट निर्भरता होगी, हालांकि उत्पादन में आपको इसे एपी क्लाइंट में बाहरी निर्भरता में लपेटना चाहिए और रिपॉजिटरी पैटर्न का उपयोग करना चाहिए।

Post_bloc.dart बनाएं

 import 'package:bloc/bloc.dart'; import 'package:meta/meta.dart'; import 'package:http/http.dart' as http; import 'package:flutter_infinite_list/bloc/bloc.dart'; import 'package:flutter_infinite_list/models/models.dart'; class PostBloc extends Bloc<PostEvent, PostState> { final http.Client httpClient; PostBloc({@required this.httpClient}); @override // TODO: implement initialState PostState get initialState => null; @override Stream<PostState> mapEventToState( PostState currentState, PostEvent event, ) async* { // TODO: implement mapEventToState yield null; } }

ध्यान दें कि केवल हमारी कक्षा की घोषणा से हम यह कह सकते हैं कि यह PostEvents को स्वीकार करेगा और PostStates देगा

चलो आरंभिक विकास को आगे बढ़ाते हैं।

 import 'package:bloc/bloc.dart'; import 'package:meta/meta.dart'; import 'package:http/http.dart' as http; import 'package:flutter_infinite_list/bloc/bloc.dart'; import 'package:flutter_infinite_list/models/models.dart'; class PostBloc extends Bloc<PostEvent, PostState> { final http.Client httpClient; PostBloc({@required this.httpClient}); @override PostState get initialState => PostState.initial(); @override Stream<PostState> mapEventToState( PostState currentState, PostEvent event, ) async* { // TODO: implement mapEventToState yield null; } }

अगला, आपको mapEventToState को लागू करने की आवश्यकता है, जो हर बार किसी ईवेंट को भेजे जाने पर आग लगाएगा।

 import 'dart:convert'; import 'package:meta/meta.dart'; import 'package:http/http.dart' as http; import 'package:bloc/bloc.dart'; import 'package:flutter_infinite_list/bloc/bloc.dart'; import 'package:flutter_infinite_list/models/models.dart'; class PostBloc extends Bloc<PostEvent, PostState> { final http.Client httpClient; PostBloc({@required this.httpClient}); @override get initialState => PostState.initial(); @override Stream<PostState> mapEventToState(currentState, event) async* { if (event is Fetch && !currentState.hasReachedMax) { try { final posts = await _fetchPosts(currentState.posts.length, 20); if (posts.isEmpty) { yield currentState.copyWith(hasReachedMax: true); } else { yield PostState.success(currentState.posts + posts); } } catch (_) { yield PostState.failure(); } } } Future<List<Post>> _fetchPosts(int startIndex, int limit) async { final response = await httpClient.get( 'https://jsonplaceholder.typicode.com/posts?_start=$startIndex&_limit=$limit'); if (response.statusCode == 200) { final data = json.decode(response.body) as List; return data.map((rawPost) { return Post( id: rawPost['id'], title: rawPost['title'], body: rawPost['body'], ); }).toList(); } else { throw Exception('error fetching posts'); } } }

अब हर बार PostEvent भेज दिया जाता है, अगर यह एक नमूनाकरण घटना है और हम सूची के अंत तक नहीं पहुंचे हैं, तो अगली 20 प्रविष्टियां प्रदर्शित की जाएंगी।

चलिए हमारे PostBloc को थोड़ा संशोधित करते हैं

 import 'dart:convert'; import 'package:meta/meta.dart'; import 'package:rxdart/rxdart.dart'; import 'package:http/http.dart' as http; import 'package:bloc/bloc.dart'; import 'package:flutter_infinite_list/bloc/bloc.dart'; import 'package:flutter_infinite_list/models/models.dart'; class PostBloc extends Bloc<PostEvent, PostState> { final http.Client httpClient; PostBloc({@required this.httpClient}); @override Stream<PostEvent> transform(Stream<PostEvent> events) { return (events as Observable<PostEvent>) .debounce(Duration(milliseconds: 500)); } @override get initialState => PostState.initial(); @override Stream<PostState> mapEventToState(currentState, event) async* { if (event is Fetch && !currentState.hasReachedMax) { try { final posts = await _fetchPosts(currentState.posts.length, 20); if (posts.isEmpty) { yield currentState.copyWith(hasReachedMax: true); } else { yield PostState.success(currentState.posts + posts); } } catch (_) { yield PostState.failure(); } } } Future<List<Post>> _fetchPosts(int startIndex, int limit) async { final response = await httpClient.get( 'https://jsonplaceholder.typicode.com/posts?_start=$startIndex&_limit=$limit'); if (response.statusCode == 200) { final data = json.decode(response.body) as List; return data.map((rawPost) { return Post( id: rawPost['id'], title: rawPost['title'], body: rawPost['body'], ); }).toList(); } else { throw Exception('error fetching posts'); } } }

महान, हमने व्यावसायिक तर्क के कार्यान्वयन को पूरा किया है!

हमारे UI को आकर्षित करने के लिए वर्ग main.dart बनाएँ और उसमें runApp लागू करें

 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Infinite Scroll', home: Scaffold( appBar: AppBar( title: Text('Posts'), ), body: HomePage(), ), ); } }

अगला, एक HomePage बनाएं जो हमारी पोस्ट प्रदर्शित करता है और PostBloc से कनेक्ट होता है

 class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { final _scrollController = ScrollController(); final PostBloc _postBloc = PostBloc(httpClient: http.Client()); final _scrollThreshold = 200.0; _HomePageState() { _scrollController.addListener(_onScroll); _postBloc.dispatch(Fetch()); } @override Widget build(BuildContext context) { return BlocBuilder( bloc: _postBloc, builder: (BuildContext context, PostState state) { if (state.isInitializing) { return Center( child: CircularProgressIndicator(), ); } if (state.isError) { return Center( child: Text('failed to fetch posts'), ); } if (state.posts.isEmpty) { return Center( child: Text('no posts'), ); } return ListView.builder( itemBuilder: (BuildContext context, int index) { return index >= state.posts.length ? BottomLoader() : PostWidget(post: state.posts[index]); }, itemCount: state.hasReachedMax ? state.posts.length : state.posts.length + 1, controller: _scrollController, ); }, ); } @override void dispose() { _postBloc.dispose(); super.dispose(); } void _onScroll() { final maxScroll = _scrollController.position.maxScrollExtent; final currentScroll = _scrollController.position.pixels; if (maxScroll - currentScroll <= _scrollThreshold) { _postBloc.dispatch(Fetch()); } } }

अगला, हम बॉटमलैडर लागू करते हैं, जो उपयोगकर्ता को नए पदों के लोडिंग को दिखाएगा।

 class BottomLoader extends StatelessWidget { @override Widget build(BuildContext context) { return Container( alignment: Alignment.center, child: Center( child: SizedBox( width: 33, height: 33, child: CircularProgressIndicator( strokeWidth: 1.5, ), ), ), ); } }

अंत में, हम एक PostWidget लागू करते हैं जो टाइप पोस्ट के एक ही ऑब्जेक्ट को आकर्षित करेगा

 class PostWidget extends StatelessWidget { final Post post; const PostWidget({Key key, @required this.post}) : super(key: key); @override Widget build(BuildContext context) { return ListTile( leading: Text( post.id.toString(), style: TextStyle(fontSize: 10.0), ), title: Text('${post.title}'), isThreeLine: true, subtitle: Text(post.body), dense: true, ); } }

बस इतना ही, अब आप एप्लिकेशन को चला सकते हैं और परिणाम देख सकते हैं।

प्रोजेक्ट स्रोतों को जीथब पर डाउनलोड किया जा सकता है

स्पंदन क्लाइंट सर्वर अनुप्रयोग उदाहरण

More articles: