Stories by Oemam Pedia on Medium

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Vdis5uWud954FwZG.png" /></figure>hello, in this article i am going to share my experience using flutter to build some features called lazyload. not only on one method, i will show you in each method using common way no package needed, come by default there is setState, and some packages that require to install and setup in your flutter project before follow this article using provider and getx.you don’t have to follow this 3 ways that i will show to you in this article. you only have to choose one way that relevant to your flutter project, is it setState, provider, or getx.<blockquote>Disclaimer, in this article i will only show you how to use lazy load in several ways. not how to setup the app from beginning. espescially, provider and getx. so, state management knowledge is required in this article.</blockquote><h3>Creating the components first</h3>before we create a lazy load, we need some components that can handle if it is in the end of the scroll or not.here some code that i used to wrap my ListTile or Widget that build for each item of the list of data.<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/1b71bb71b00442fc8cb25438221b3253/href">https://medium.com/media/1b71bb71b00442fc8cb25438221b3253/href</a></iframe>after that, let me tell you how to use it inside your widget or screen and how should we fetch the data to show it inside your widget or screen.<h3>Default way, setState</h3>for the first way, we only use one class that extends StatefullWidget to handle it.<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/271bb86b87b45dc316a6d0bf4cd24c43/href">https://medium.com/media/271bb86b87b45dc316a6d0bf4cd24c43/href</a></iframe>of course you can simplify some part of the code or giving more validations if you want to.<h3>Use Provider</h3>in here, i have create some utils and component that has been helped me a lot to process the data. you can check it the source at the end of this article.now let me focusing to show you how i can fetch the data from provider and deliver it into UI.<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/5b5db061b3bb10dc8e3ea74b550bfa49/href">https://medium.com/media/5b5db061b3bb10dc8e3ea74b550bfa49/href</a></iframe>and this is the code that we have in our provider<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/d526b5c21ce13c2ea9fb53c30e0eef20/href">https://medium.com/media/d526b5c21ce13c2ea9fb53c30e0eef20/href</a></iframe><h3>Use Getx</h3>when we use getx, then we haven’t a reason to use StatefullWidget anymore. because, all of the widget lifecycle we can rely on getx controller.<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/e7b430f4927a4b5ce81499c17fe5c77c/href">https://medium.com/media/e7b430f4927a4b5ce81499c17fe5c77c/href</a></iframe>after we setup the UI, here is the controller.<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/ea77d16510b6eb8a183f703e51f998af/href">https://medium.com/media/ea77d16510b6eb8a183f703e51f998af/href</a></iframe>finish.if you have a question or correction to this article. do not be hesitate to me.<a href="https://github.com/billbull21/EasyLazyLoadFlutter">GitHub - billbull21/EasyLazyLoadFlutter: this repo contains a boilerplate to do lazy load in flutter. more explanation checkout to oemampedia medium post.</a>thanks.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=8b6ccfa95584" width="1" height="1" alt="">

hello, in this article i am going to share my experience using flutter to build some features called lazyload. not only on one method, i will show you in each method using common way no package needed, come by default there is setState, and some packages that require to install and setup in your flutter project before follow this article using provider and getx.
you don’t have to follow this 3 ways that i will show to you in this article. you only have to choose one way that relevant to your flutter project, is it setState, provider, or getx.
Disclaimer, in this article i will only show you how to use lazy load in several ways. not how to setup the app from beginning. espescially, provider and getx. so, state management knowledge is required in this article.
Creating the components first
before we create a lazy load, we need some components that can handle if it is in the end of the scroll or not.
here some code that i used to wrap my ListTile or Widget that build for each item of the list of data.
https://medium.com/media/1b71bb71b00442fc8cb25438221b3253/href
after that, let me tell you how to use it inside your widget or screen and how should we fetch the data to show it inside your widget or screen.
Default way, setState
for the first way, we only use one class that extends StatefullWidget to handle it.
https://medium.com/media/271bb86b87b45dc316a6d0bf4cd24c43/href
of course you can simplify some part of the code or giving more validations if you want to.
Use Provider
in here, i have create some utils and component that has been helped me a lot to process the data. you can check it the source at the end of this article.
now let me focusing to show you how i can fetch the data from provider and deliver it into UI.
https://medium.com/media/5b5db061b3bb10dc8e3ea74b550bfa49/href
and this is the code that we have in our provider
https://medium.com/media/d526b5c21ce13c2ea9fb53c30e0eef20/href
Use Getx
when we use getx, then we haven’t a reason to use StatefullWidget anymore. because, all of the widget lifecycle we can rely on getx controller.
https://medium.com/media/e7b430f4927a4b5ce81499c17fe5c77c/href
after we setup the UI, here is the controller.
https://medium.com/media/ea77d16510b6eb8a183f703e51f998af/href
finish.
if you have a question or correction to this article. do not be hesitate to me.
GitHub - billbull21/EasyLazyLoadFlutter: this repo contains a boilerplate to do lazy load in flutter. more explanation checkout to oemampedia medium post.
thanks.

Easy Lazyload in Flutter Using SetState, Provider, and GetX

<figure><img alt="" src="https://cdn-images-1.medium.com/max/937/0*O6WVp0qxs4lSRGiQ.png" /></figure>If you are looking for how to open your flutter app by particular link, then deeplink may can give you that.Someday, i have a flutter app, and i wanted to know how can i open my flutter app by url link, so if the user was installing my app before, then i liked to redirect to my flutter app. and if the user wasn’t installing the app, then redirect to browser.There are bunch ways to do deeplink. first, i use one of the flutter package to handle deeplink, called <a href="https://pub.dev/packages/uni_links">uni_links</a>. it can work well. but, there is something behavior that i don’t want. what is the problem?, if the app was closed and redirect from url. the deeplink data still keep storing, even i have used it.Then i look for other ways. i do android native approach, that is android. because, i don’t have any apple devices T_T. After that, I found a nice article, here is the <a href="https://medium.com/flutter-community/deep-links-and-flutter-applications-how-to-handle-them-properly-8c9865af9283">link</a>. it give you the way to do in both of Android and iOS device, so you can do the same thing to iOS.<blockquote>But, still i facing the same problem with <a href="https://pub.dev/packages/uni_links">uni_links</a>. because i wrote the code by myself, so i can change the code without opening other people code :D.</blockquote>Let’s try it.<h3>AndroidManifest</h3>Add some code to your manifest. app/src/main/AndroidManifest.xml<pre>&lt;intent-filter&gt; &lt;action android:name=&quot;android.intent.action.VIEW&quot;/&gt; &lt;category android:name=&quot;android.intent.category.DEFAULT&quot;/&gt; &lt;category android:name=&quot;android.intent.category.BROWSABLE&quot;/&gt; &lt;data android:scheme=&quot;http&quot; android:host=&quot;mydomain.com&quot;/&gt; &lt;/intent-filter&gt;</pre>then, change android:launchMode to singleTask in your AndroidManifest, android:launchMode=”singleTask” . so may look like this<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VQHKj8XlmMnPmJd01L6YRg.png" /></figure>It will prevent the app to opening two or more of your app running in the background. So, if your app was is in the background. then, it will be resumed your app instead of creating new proccess.<h3>Implements Platform Channel</h3>let’s create a native code, so that later we can call it into dart code.open your MainActivity and add the code bellow.<pre>class MainActivity: FlutterActivity() { private val CHANNEL = &quot;channel&quot; private val EVENTS = &quot;events&quot; private var startString: String? = null private var linksReceiver: BroadcastReceiver? = null override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) { GeneratedPluginRegistrant.registerWith(flutterEngine) MethodChannel(flutterEngine.dartExecutor, CHANNEL).setMethodCallHandler { call, result -&gt; if (call.method == &quot;initialLink&quot;) { if (startString != null) { val res = startString startString = null result.success(res) } else { result.error(&quot;notIntent&quot;, &quot;link is null&quot;, null) } } } EventChannel(flutterEngine.dartExecutor, EVENTS).setStreamHandler( object : EventChannel.StreamHandler { override fun onListen(args: Any?, events: EventChannel.EventSink) { linksReceiver = createChangeReceiver(events) } override fun onCancel(args: Any?) { linksReceiver = null } } ) } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val intent = getIntent() startString = intent.data?.toString() } override fun onNewIntent(intent: Intent) { super.onNewIntent(intent) if (intent.action === Intent.ACTION_VIEW) { linksReceiver?.onReceive(this.applicationContext, intent) } } fun createChangeReceiver(events: EventChannel.EventSink): BroadcastReceiver? { return object : BroadcastReceiver() { override fun onReceive(context: Context, intent: Intent) { // NOTE: assuming intent.getAction() is Intent.ACTION_VIEW val dataString = intent.dataString ?: events.error(&quot;UNAVAILABLE&quot;, &quot;Link unavailable&quot;, null) events.success(dataString) } } } }</pre>There is MethodChannel and EventChannel. What can they do?MethodChannel : it will be called if the app was launch from the start.EventChannel : we use to stream data, if the app was launch before. so we can listen the data and do onResume to our flutter app.<h3>Call in The Dart Side</h3>let’s take a look how we implement it into your dart code.add the code below to your screen.<pre>import &#39;dart:async&#39;; import &#39;dart:io&#39;; import &#39;package:flutter/material.dart&#39;; import &#39;package:flutter/services.dart&#39;; class MyHomeApp extends StatefulWidget { @override _MyHomeAppState createState() =&gt; new _MyHomeAppState(); } class _MyHomeAppState extends State&lt;MyHomeApp&gt; { final stream = const EventChannel(&#39;events&#39;); StreamController&lt;String&gt; _stateController = StreamController(); //Method channel creation static const platform = const MethodChannel(&#39;channel&#39;); @override initState() { super.initState(); //Checking application start by deep link startUri().then(_onRedirected).catchError((e) =&gt; print(&quot;unavailable link&quot;)); //Checking broadcast stream, if deep link was clicked in opened appication stream.receiveBroadcastStream().listen((d) =&gt; _onRedirected(d)); } _onRedirected(String uri) { // Here can be any uri analysis, checking tokens etc, if it’s necessary // Throw deep link URI into the BloC&#39;s stream print(&quot;URI LAUNCH : $uri&quot;); final links = Uri.parse(uri); print(&quot;URI LAUNCH PATH : ${links.path}&quot;); print(&quot;URI LAUNCH PATH SEGMENTS : ${links.pathSegments}&quot;); print(&quot;URI LAUNCH QUERY : ${links.queryParameters}&quot;); // you can redirect to another page by listen the path segments // EG: product/shoes -&gt; then i want to redirect to product screen _stateController.sink.add(uri); // ignore this if you wanted to redirect to another page } Future&lt;String&gt; startUri() async { try { return platform.invokeMethod(&#39;initialLink&#39;); } on PlatformException catch (e) { throw(e); } } @override dispose() { if (_stateController != null) _stateController.close(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(&#39;Plugin example app&#39;), ), body: StreamBuilder&lt;String&gt;( stream: _stateController.stream, builder: (context, snapshot) { if (!snapshot.hasData) { return Container( child: Center( child: Text(&#39;No deep link was used &#39;))); } else { final links = Uri.parse(snapshot.data); return Container( child: Center( child: Padding( padding: EdgeInsets.all(20.0), child: Text(&#39;Redirected: ${links.path} - ${links.query}&#39;)))); } }, ), ); } }</pre>if you want to redirect the app to another page, you can ignore stream builder and stream sink.i put my example app on the github if you wanna take a look. <a href="https://github.com/billbull21/deeplink_flutter">here</a>don’t be hesitate to comment below :D.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=b0c9a7e1aa9d" width="1" height="1" alt="">

If you are looking for how to open your flutter app by particular link, then deeplink may can give you that.
Someday, i have a flutter app, and i wanted to know how can i open my flutter app by url link, so if the user was installing my app before, then i liked to redirect to my flutter app. and if the user wasn’t installing the app, then redirect to browser.
There are bunch ways to do deeplink. first, i use one of the flutter package to handle deeplink, called uni_links. it can work well. but, there is something behavior that i don’t want. what is the problem?, if the app was closed and redirect from url. the deeplink data still keep storing, even i have used it.
Then i look for other ways. i do android native approach, that is android. because, i don’t have any apple devices T_T. After that, I found a nice article, here is the link. it give you the way to do in both of Android and iOS device, so you can do the same thing to iOS.
But, still i facing the same problem with uni_links. because i wrote the code by myself, so i can change the code without opening other people code :D.
Let’s try it.
AndroidManifest
Add some code to your manifest. app/src/main/AndroidManifest.xml
<intent-filter>
 <action android:name="android.intent.action.VIEW"/>
 <category android:name="android.intent.category.DEFAULT"/>
 <category android:name="android.intent.category.BROWSABLE"/>
 <data
 android:scheme="http"
 android:host="mydomain.com"/>
</intent-filter>
then, change android:launchMode to singleTask in your AndroidManifest, android:launchMode=”singleTask” . so may look like this

It will prevent the app to opening two or more of your app running in the background. So, if your app was is in the background. then, it will be resumed your app instead of creating new proccess.
Implements Platform Channel
let’s create a native code, so that later we can call it into dart code.
open your MainActivity and add the code bellow.
class MainActivity: FlutterActivity() {
 private val CHANNEL = "channel"
 private val EVENTS = "events"
 private var startString: String? = null
 private var linksReceiver: BroadcastReceiver? = null
 override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
 GeneratedPluginRegistrant.registerWith(flutterEngine)
 MethodChannel(flutterEngine.dartExecutor, CHANNEL).setMethodCallHandler { call, result ->
 if (call.method == "initialLink") {
 if (startString != null) {
 val res = startString
 startString = null
 result.success(res)
 } else {
 result.error("notIntent", "link is null", null)
 }
 }
 }
 EventChannel(flutterEngine.dartExecutor, EVENTS).setStreamHandler(
 object : EventChannel.StreamHandler {
 override fun onListen(args: Any?, events: EventChannel.EventSink) {
 linksReceiver = createChangeReceiver(events)
 }
 override fun onCancel(args: Any?) {
 linksReceiver = null
 }
 }
 )
 }
 override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 val intent = getIntent()
 startString = intent.data?.toString()
 }
 override fun onNewIntent(intent: Intent) {
 super.onNewIntent(intent)
 if (intent.action === Intent.ACTION_VIEW) {
 linksReceiver?.onReceive(this.applicationContext, intent)
 }
 }
 fun createChangeReceiver(events: EventChannel.EventSink): BroadcastReceiver? {
 return object : BroadcastReceiver() {
 override fun onReceive(context: Context, intent: Intent) { // NOTE: assuming intent.getAction() is Intent.ACTION_VIEW
 val dataString = intent.dataString ?:
 events.error("UNAVAILABLE", "Link unavailable", null)
 events.success(dataString)
 }
 }
 }
}
There is MethodChannel and EventChannel. What can they do?
MethodChannel : it will be called if the app was launch from the start.
EventChannel : we use to stream data, if the app was launch before. so we can listen the data and do onResume to our flutter app.
Call in The Dart Side
let’s take a look how we implement it into your dart code.
add the code below to your screen.
import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class MyHomeApp extends StatefulWidget {
 @override
 _MyHomeAppState createState() => new _MyHomeAppState();
}
class _MyHomeAppState extends State<MyHomeApp> {
 final stream = const EventChannel('events');
 StreamController<String> _stateController = StreamController();
 //Method channel creation
 static const platform = const MethodChannel('channel');
 @override
 initState() {
 super.initState();
 //Checking application start by deep link
 startUri().then(_onRedirected).catchError((e) => print("unavailable link"));
 //Checking broadcast stream, if deep link was clicked in opened appication
 stream.receiveBroadcastStream().listen((d) => _onRedirected(d));
 }
 _onRedirected(String uri) {
 // Here can be any uri analysis, checking tokens etc, if it’s necessary
 // Throw deep link URI into the BloC's stream
 print("URI LAUNCH : $uri");
 final links = Uri.parse(uri);
 print("URI LAUNCH PATH : ${links.path}");
 print("URI LAUNCH PATH SEGMENTS : ${links.pathSegments}");
 print("URI LAUNCH QUERY : ${links.queryParameters}");
 // you can redirect to another page by listen the path segments
 // EG: product/shoes -> then i want to redirect to product screen
 _stateController.sink.add(uri); // ignore this if you wanted to redirect to another page
 }
 Future<String> startUri() async {
 try {
 return platform.invokeMethod('initialLink');
 } on PlatformException catch (e) {
 throw(e);
 }
 }
 @override
 dispose() {
 if (_stateController != null) _stateController.close();
 super.dispose();
 }
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('Plugin example app'),
 ),
 body: StreamBuilder<String>(
 stream: _stateController.stream,
 builder: (context, snapshot) {
 if (!snapshot.hasData) {
 return Container(
 child: Center(
 child: Text('No deep link was used ')));
 } else {
 final links = Uri.parse(snapshot.data);
 return Container(
 child: Center(
 child: Padding(
 padding: EdgeInsets.all(20.0),
 child: Text('Redirected: ${links.path} - ${links.query}'))));
 }
 },
 ),
 );
 }
}
if you want to redirect the app to another page, you can ignore stream builder and stream sink.
i put my example app on the github if you wanna take a look. here
don’t be hesitate to comment below :D.

Bring the ideas into digital world!

Newest Article!