tag:blogger.com,1999:blog-56668815084646137992024-03-19T05:43:39.171-07:00Android_GuidelinesHey Friends ,
I am Akash. I am an Android Developer working in Gurgaon, India.
In this blog I will share my technical experiences, learnings and challenges from my software development career.Akash Bisariyahttp://www.blogger.com/profile/09587286998959079329noreply@blogger.comBlogger11125tag:blogger.com,1999:blog-5666881508464613799.post-37412064714465055652022-12-18T07:04:00.004-08:002022-12-18T09:33:03.621-08:00Flutter : Using Form and Text Fields<div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOUCapUtiyu9nMLefP0w7kpSEfSsMgitjGi2qzjKRKzq-8aie56e4fAgNZYS8oSjwm0q6zw-Gfv6sMSM3N5ZsYb_PzcvCpyjUNf6Gd1-yMpmgoKRTdn5mxsZTVMP_UfM5yI-tTahqRcsM6lg4y39L8FYhlTk42TkN-tmMKDHpLDLPzFf8QfuAkt04/s320/flutter-logo-sharing.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="158" data-original-width="320" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOUCapUtiyu9nMLefP0w7kpSEfSsMgitjGi2qzjKRKzq-8aie56e4fAgNZYS8oSjwm0q6zw-Gfv6sMSM3N5ZsYb_PzcvCpyjUNf6Gd1-yMpmgoKRTdn5mxsZTVMP_UfM5yI-tTahqRcsM6lg4y39L8FYhlTk42TkN-tmMKDHpLDLPzFf8QfuAkt04/s1600/flutter-logo-sharing.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div>Flutter is a popular cross-platform mobile development framework that allows developers to build native apps for both Android and iOS using a single codebase. <br /><br />Today we will see how to use form and textfields.<br /><br />One of the key components in Flutter is the form and TextFormField, which can be used to build user input forms in your app.<br /><br />To use form and TextFormField in Flutter, you need to import the form package and wrap your form widgets in a Form widget. Inside the Form widget, you can use the TextFormField widget to create input fields for user input.<br /><br />To create a form with a single text input field, we can use the following code:<br /><br /><script src="https://gist.github.com/akash-bisariya/6a10ca2d05ad8b87e9c871c6fa9c08e4.js"></script><br /><br />In the code above, we create a Form widget with a TextFormField and a RaisedButton. The TextFormField has a decoration property to customize the appearance of the input field, and a validator function to check the user input. The onSaved function is called when the form is submitted, and it saves the user input to a variable.<br /><br />The RaisedButton has an onPressed function that calls the validate and save methods on the FormState object to validate and save the user input. If the form is valid, it shows a snackbar with the user input.<br /><br />We can add more input fields to the form by adding more TextFormField widgets inside the Column widget. You can also customize the appearance of the form and the input fields using the various properties and styles available in Flutter.<br /><br />In short using form and TextFormField in Flutter is a simple and powerful way to build user input forms in your app. With a few lines of code, you can create a form with multiple input fields and validate and save the user input.<p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; font-size: 16px; margin: 1.25em 0px; white-space: pre-wrap;">Thanks for the reading...</p></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><br />Akash Bisariyahttp://www.blogger.com/profile/09587286998959079329noreply@blogger.com1tag:blogger.com,1999:blog-5666881508464613799.post-2648717550492351102021-04-11T05:11:00.003-07:002021-04-11T09:19:05.805-07:00Learn Flutter day 4 : Stateful Widgets<p><span style="font-family: inherit;"></span></p><div class="separator" style="clear: both; text-align: center;"><span style="font-family: inherit;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxch1UwK_ID-fqI7SDI7B-QdZkS3LAyu5bBZJKTOsW0SRhDTzh8TGCgQtbnXKXoNLCLSmnfZaDMKkY_0qNrcRVBtCrfWyBFaCENrErP-Cx4yNW1wIxfVSYTU_RZBY74hPooS3gEvaHImA/s320/flutter-logo-sharing.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="158" data-original-width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxch1UwK_ID-fqI7SDI7B-QdZkS3LAyu5bBZJKTOsW0SRhDTzh8TGCgQtbnXKXoNLCLSmnfZaDMKkY_0qNrcRVBtCrfWyBFaCENrErP-Cx4yNW1wIxfVSYTU_RZBY74hPooS3gEvaHImA/s0/flutter-logo-sharing.png" /></a></span></div><span style="font-family: inherit;">Hello Friends,</span><p></p><p><span style="font-family: inherit;">In the last blog we learn about stateless widgets, you can check the last blog here -</span></p><p><span style="font-family: inherit;"><a href="https://bigakash.blogspot.com/2021/03/learn-flutter-3rd-day-flutter.html">https://bigakash.blogspot.com/2021/03/learn-flutter-3rd-day-flutter.html</a><br /></span></p><p><span style="font-family: inherit;">In this post we will learn Stateful widgets and will see some common widgets that are used in building layout/UI for flutter applications.</span></p><p><span style="font-family: inherit;">So Lets get started!!</span></p><p><b><span style="font-family: inherit;"><u>Stateful Widgets</u> -</span></b></p><p><span style="font-family: inherit;">Stateful widgets maintain state that can be changed based on user interactions.</span></p><p><span style="font-family: inherit;">To build these widgets we require two classes - 1) <a href="https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html">StatefulWidget</a> & 2) <a href="https://api.flutter.dev/flutter/widgets/State-class.html">State</a> class.</span></p><p><span style="font-family: inherit;"><a href="https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html">Stateful Widget</a> object itself is immutable and can be regenerated but the <a href="https://api.flutter.dev/flutter/widgets/State-class.html">State</a> object persists over the lifetime of widgets to hold state/information.</span></p><p><span style="font-family: inherit;">There is a shortcut to create a Stateful widget in Android Studio. Just type 'stful' outside the widget class that we had created in last post example and it will generate the boilerplate code for 2 classes one for stateless widget and one for its state. </span></p><p><span style="font-family: inherit;">We will name this as <span style="color: #2b00fe;">StatefulCounter</span> widget which will include a 'increment' button and a text which will show the count. The count will increase whenever we press the 'increment' button as below -</span></p><p><span style="font-family: inherit;"><script src="https://gist.github.com/akash-bisariya/fb9b8d69c30773658439f37ba924fd4a.js"></script>In the above code we have created a class </span><span style="background-color: white; color: #2b00fe;">_StatefulCounterState </span><span style="font-family: inherit;">which will maintain the state of the widget. The </span><span style="color: #2b00fe;">_increment() </span><span style="font-family: inherit;">method will be called when the button is pressed.</span></p><p>In the <span style="color: #2b00fe;">_increment()</span> method we are calling setState() which indicates that some of the internal state has changed, at this time widget rebuild itself by calling build() method.</p><p>In the build() method we are returning the parent Scaffold widget with the <span style="color: #2b00fe;">Container</span> widget in its body property. This Container widget can have one child only. So we have created a <span style="color: #2b00fe;">Center</span> widget which will center its child. As its child we have created a <span style="color: #2b00fe;">Column</span> widget which will have 2 children -</p><p>1) Elevated Button & 2) Text which will show the count.</p><p>Whenever we press this button the count will increase. </p><p><span style="font-family: inherit;"></span></p><div class="separator" style="clear: both; text-align: center;"><span style="font-family: inherit;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSFCFDYLvzRsrnGCK3adJzqzZOkhC5bhoB1maNAIsVejGNARdrROo-w1NwFcGIOiHspMu37jJt-VwD0oyCckXh2Yky1PY_jTYUZcWwzyBLVB_FD6qZoW6WDWrm8sl2JFuIRweK4CEvX6E/s1280/Screenshot_20210411-145914.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="720" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSFCFDYLvzRsrnGCK3adJzqzZOkhC5bhoB1maNAIsVejGNARdrROo-w1NwFcGIOiHspMu37jJt-VwD0oyCckXh2Yky1PY_jTYUZcWwzyBLVB_FD6qZoW6WDWrm8sl2JFuIRweK4CEvX6E/w225-h400/Screenshot_20210411-145914.jpg" width="225" /></a></span></div><p><span style="font-family: inherit;"><b><u>Useful Widgets</u> -</b></span></p><p><span style="font-family: inherit;"><b>1) Image - </b>This widget is used to show images on the UI. There are several ways or constructors are provided to load the image as -</span></p><p><span style="font-family: inherit;">1) <span style="color: #2b00fe;">Image.asset</span> To obtain image from assets folder.</span></p><p><span style="font-family: inherit;"><span style="font-family: inherit;">2)<span style="color: #2b00fe;"> Image.network</span> To obtain image from link or url.</span></span></p><p><span style="font-family: inherit;"><span style="font-family: inherit;">3) <span style="color: #2b00fe;">Image.file</span> To obtain image from a file or local path.</span></span></p><pre style="background-color: white; color: #080808; font-family: Consolas, monospace; font-size: 10.5pt;"><span style="color: #2196f3;">Image</span>.<span style="color: #2196f3;">asset</span>(<br /> <span style="color: #067d17;">"assets/images/image/exa.png"</span>,<br /> fit: <span style="color: black;">BoxFit</span>.<span style="color: #871094;">cover</span>,<br />)</pre><p><span style="font-family: inherit;"><span style="font-family: inherit;"><b>2) Stack - </b>This widget can contain multiple children widgets one above the others.</span></span></p><pre style="background-color: white; color: #080808; font-family: Consolas, monospace; font-size: 10.5pt;"> child: <span style="color: #2196f3;">Stack</span>(<br /> children: <<span style="color: black;">Widget</span>>[<br /> <span style="color: #2196f3;">Container</span>(<br /> color: RED,<br /> ),<br /> <span style="color: #2196f3;">Container</span>(<br /> margin: <span style="color: #2196f3;">EdgeInsets</span>.<span style="color: #2196f3;">symmetric</span>(vertical: <span style="color: #1750eb;">10</span>, horizontal: <span style="color: #1750eb;">20</span>),<br /> color: BLUE_LIGHT,<br /> ),<br /> <span style="color: #2196f3;">Container</span>(<br /> margin: <span style="color: #2196f3;">EdgeInsets</span>.<span style="color: #2196f3;">symmetric</span>(vertical: <span style="color: #1750eb;">30</span>, horizontal: <span style="color: #1750eb;">60</span>),<br /> color: PURPLE,<br /> ),<br /> ],<br /> );</pre><p></p><p><span style="font-family: inherit;"><b>3) Container -</b></span></p><p>Container contains only one child and it can manage its width, height and background also.</p><pre style="background-color: white; color: #080808; font-family: Consolas, monospace; font-size: 10.5pt;"><span style="color: #2196f3;">Container</span>(<br /> color: RED,<br /> child: <span style="color: #2196f3;">Text</span>(<span style="color: #067d17;">"Hello world"</span>),<br /> width: <span style="color: #1750eb;">200.0</span>,<br /> height: <span style="color: #1750eb;">100.0</span>,<br /> margin:<br /> <span style="color: #2196f3;">EdgeInsets</span>.<span style="color: #2196f3;">only</span>(left: <span style="color: #1750eb;">10.0</span>, right: <span style="color: #1750eb;">50.0</span>, top: <span style="color: #1750eb;">10</span>, bottom: <span style="color: #1750eb;">30</span>)<br /> <br />)</pre><p><b>4) Row & Column -</b></p><p>We have already used these two widgets in our examples. These widgets can be used to show multiple widgets in one direction, The Row-widget will show widget in the horizontal direction and the Column widget will show widget in the vertical direction. We can also use 'mainAxisAlignment' to control the alignment of the widgets.</p><p>So here we saw Stateful widget and some useful widgets. You can check the complete code on github repository below -</p><p>https://github.com/akash-bisariya/LearnFlutterApp</p><p>In next blog post we will see how to build the screen layouts in a flutter application using widgets.</p><p>Thanks for the reading... </p>
Akash Bisariyahttp://www.blogger.com/profile/09587286998959079329noreply@blogger.com3tag:blogger.com,1999:blog-5666881508464613799.post-78550765369097350962021-03-19T00:15:00.003-07:002021-03-19T00:28:43.514-07:00Learn Flutter Day 3 - Flutter Architecture & Widgets <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHp5Tsgzdn3c5nL2iZWxSbXiwzOHgslh4XG5lG-jbeAhKOGK34WT5GDuE84RXKsxt2zCVPwydT6h8jgoMHBixmyUDrsUKhVT94jlBkaiblvCyYTaMvhHB_ORYZoCJMI6d-3DUCe5XQOfA/s320/flutter-logo-sharing.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="158" data-original-width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHp5Tsgzdn3c5nL2iZWxSbXiwzOHgslh4XG5lG-jbeAhKOGK34WT5GDuE84RXKsxt2zCVPwydT6h8jgoMHBixmyUDrsUKhVT94jlBkaiblvCyYTaMvhHB_ORYZoCJMI6d-3DUCe5XQOfA/s0/flutter-logo-sharing.png" /></a></div><p>Hi Friends,</p><p>Today we will learn about Flutter Architecture, how it works under the hood and then we will learn about Widgets to develop UI interfaces in Flutter.</p><p>Let's Get Started!!</p><p><b><u>Flutter Architecture-</u></b></p><p>Flutter is an open source cross platform development toolkit, It is designed to reuse the same code with different platforms like Android, iOS and Web.</p><p>In development phase Flutter applications runs in VM and then for release they are directly compiled to machine code.</p><p>Flutter is designed as an layer system with no layer has privileged access to the layer below.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3n7FazyWt9mEORs6fxo8eutoQpWwmvvyXLznymJQ0-xT-yllHbLyLBsbt0xlv4MZzhN0RAlCukQVTFTJQA-5QLC18q4BD8cyiBfx3PsSuvV3-4iKjNuZWrFkU_L04YabeeMbga9Hvp7A/s1836/archdiagram_flutter.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1506" data-original-width="1836" height="329" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3n7FazyWt9mEORs6fxo8eutoQpWwmvvyXLznymJQ0-xT-yllHbLyLBsbt0xlv4MZzhN0RAlCukQVTFTJQA-5QLC18q4BD8cyiBfx3PsSuvV3-4iKjNuZWrFkU_L04YabeeMbga9Hvp7A/w450-h329/archdiagram_flutter.png" width="450" /></a></div><p>Developers interact with the <b>Flutter Framework</b>. It provides a reactive framework written in Dart language which includes Foundational libraries like <i>animation, painting </i>etc, <i>rendering layer </i>(converting UI code into pixels)<i> </i>for rendering layouts, <i>Widgets </i>layer for rendering objects for layout and then <i>Material </i>& <i>Cupertino </i>library for implementing Material or iOS design language.</p><p>The core of the Flutter is <b>Flutter Engine </b>written in C++. It is reponsible for rasterizing composited scenes whenever a new frame needs to be painted. It provides the low level implementation of Flutter's core API, I/O, plugin architecture and Dart runtime and compile toolchain.</p><p>A platform specific <b>Embedder </b>coordinates with the underlying operating system for services like rendering surfaces, accessibility and input. It is written in language appropriate for the platform like Java/C++ for Android, Objective C/Objective C++ for iOS and macOS and C++ for Windows and Linux.</p><p><b><u>Flutter Widgets-</u></b></p><p>In Flutter widgets are everything from images, icons to layouts of the application. These are classes used to build UI elements. We can make complex widgets or layouts by composing simple widgets.</p><p>A widget declares its user interface by overiding the <b>build()</b> method. This method is designed to be fast so that it can be called by the framework whenever needed to render the frame. On each rendered frame Flutter can recreate only those parts of the UI where state has changed by calling that widget's <b>build()</b> method. Therefore it is important that build method should return quickly and heavy computational task should be done in asynchronous manner.</p><p><b><u>Widget State-</u></b></p><p>A widget can be of two types - <b>Stateless</b> or <b>Stateful.</b></p><p>Widget that don't have any properties that can change over time like icon or label are <b>Stateless</b> Widget.</p><p>Widget that needs to change based on user interaction or any other factors are <b>Stateful</b> widget.</p><p>There are various widget available in Flutter framework such as Center, Text, Row, Column, Stack, Container etc and some top level widget like MaterialApp and CupertinoApp.</p><p><b>Stateless Widget Example-</b></p><p>Now we will see how to create a stateless widget in the Flutter. Also we will learn including external package/library. Here we have used open source package named '<span style="background-color: white; color: #067d17; font-family: Consolas, monospace; font-size: 10.5pt;">english_words'</span> which contains some most used english words and will display these words randomly on Home-Screen. Lets see <a href="https://github.com/flutter/codelabs/blob/master/startup_namer_null_safety/step2_use_package/lib/main.dart" style="background-color: white; box-sizing: inherit; color: #1a73e8; font-family: Roboto, "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Naskh Arabic", "Noto Sans Thai", "Noto Sans Hebrew", "Noto Sans Bengali", sans-serif; font-size: 14px; outline: 0px; text-decoration: var(--devsite-link-text-decoration,none); word-break: break-word;" target="_blank">main.dart</a> file now -</p><p><script src="https://gist.github.com/akash-bisariya/2912dbe218e865708864758c6dd57aa6.js"></script><br /></p><p>In the above code first we create a <b>main()</b> function which simply calls the <b>runApp()</b> function that contains a widget <b>MaterialApp</b>. This widget is required to implement material design in application. It contains <i>title </i>property and <i>home </i>property which is used for routes or top level Navigator. Navigator helps in transitioning smoothly between screens. The <i><b>home</b></i> property calls the FlutterHome() class as below -</p><p><script src="https://gist.github.com/akash-bisariya/7438eccfd92750162b8118880af9d1be.js"></script><br /></p><p>This class extends with <b>StatelesWidget. </b>As we know Stateless widget need to override <b>build() </b>method to display the widget in terms of other lower level widget.</p><p>This function will return the Scaffold class which is also a widget that provides a default App bar, a title and a body property that holds widget tree for the Homescreen. In body we have added a <b>Column</b> widget which displays its children in a vertical array. Then we have 2 Text widgets as children of the column widget, we will show random words in these 2 widgets.</p><p><u><b>Using External Package-</b></u></p><p>To use the external package '<span style="background-color: white; color: #067d17; font-family: Consolas, monospace; font-size: 10.5pt;">english_words'</span>we need to append - '<span style="background-color: #e8eaed; color: #37474f; font-family: "Roboto Mono", monospace; font-size: 12.6px;">english_words: ^3.1.5-nullsafety.0'</span></p><p>to the dependencies list in <span style="background-color: #e8eaed; color: #37474f; font-family: "Roboto Mono", monospace; font-size: 12.6px;">pubspec.yaml </span>file as below -</p><pre dir="ltr" is-upgraded="" style="background: rgb(241, 243, 244); border-radius: 0px; box-sizing: inherit; direction: ltr; font-family: "Roboto Mono", monospace; font-size: 14px; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 20px; margin-bottom: 16px; margin-top: 16px; overflow: auto visible; padding: 8px 80px 8px 8px; position: relative; text-size-adjust: none;" translate="no"><code dir="ltr" style="background: 0px 50% transparent; border-radius: 4px; border: var(--devsite-inline-nested-code-border,0); box-sizing: inherit; direction: ltr; font-family: "Roboto Mono", monospace; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 20px; overflow: auto visible; padding: 0px; word-break: normal;" translate="no"><span class="pln" color="inherit" style="box-sizing: inherit;">dependencies</span><span class="pun" color="inherit" style="box-sizing: inherit;">:</span><span class="pln" color="inherit" style="box-sizing: inherit;"><br style="box-sizing: inherit;" /> flutter</span><span class="pun" color="inherit" style="box-sizing: inherit;">:</span><span class="pln" color="inherit" style="box-sizing: inherit;"><br style="box-sizing: inherit;" /> sdk</span><span class="pun" color="inherit" style="box-sizing: inherit;">:</span><span class="pln" color="inherit" style="box-sizing: inherit;"> flutter<br style="box-sizing: inherit;" /><br style="box-sizing: inherit;" /> cupertino_icons</span><span class="pun" color="inherit" style="box-sizing: inherit;">:</span><span class="pln" color="inherit" style="box-sizing: inherit;"> </span><span class="pun" color="inherit" style="box-sizing: inherit;">^</span><span class="lit" style="box-sizing: inherit; color: #4285f4;">1.0</span><span class="pun" color="inherit" style="box-sizing: inherit;">.</span><span class="lit" style="box-sizing: inherit; color: #4285f4;">2</span><span class="pln" color="inherit" style="box-sizing: inherit;"><br style="box-sizing: inherit;" /> english_words</span><span class="pun" color="inherit" style="box-sizing: inherit;">:</span><span class="pln" color="inherit" style="box-sizing: inherit;"> </span><span class="pun" color="inherit" style="box-sizing: inherit;">^</span><span class="lit" style="box-sizing: inherit; color: #4285f4;">3</span><span class="pun" color="inherit" style="box-sizing: inherit;">.</span><span class="pun" style="box-sizing: inherit;"><span style="color: #4285f4;">1.5</span></span><span class="pun" color="inherit" style="box-sizing: inherit;">-</span><span class="pun" style="box-sizing: inherit;"><span style="color: #4285f4;">nullsafety.0</span></span><span class="pln" color="inherit" style="box-sizing: inherit;"> </span></code></pre><p>Now import this package in <span style="background-color: #e8eaed; color: #37474f; font-family: "Roboto Mono", monospace; font-size: 12.6px;">main.dart </span>file as -</p><pre dir="ltr" is-upgraded="" style="background: rgb(241, 243, 244); border-radius: 0px; box-sizing: inherit; color: #5c5c5c; direction: ltr; font-family: "Roboto Mono", monospace; font-size: 14px; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 20px; margin-bottom: 16px; margin-top: 16px; overflow: auto visible; padding: 8px 80px 8px 8px; position: relative; text-size-adjust: none;" translate="no"><code dir="ltr" style="background: 0px 50% transparent; border-radius: 4px; border: var(--devsite-inline-nested-code-border,0); box-sizing: inherit; color: #37474f; direction: ltr; font-family: "Roboto Mono", monospace; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 20px; overflow: auto visible; padding: 0px; word-break: normal;" translate="no"><span class="kwd" style="box-sizing: inherit; color: #f538a0;">import</span><span class="pln" color="inherit" style="box-sizing: inherit;"> </span><span class="str" style="box-sizing: inherit; color: #34a853;">'package:flutter/material.dart'</span><span class="pun" color="inherit" style="box-sizing: inherit;">;</span><span class="pln" color="inherit" style="box-sizing: inherit;"><br style="box-sizing: inherit;" /></span><span class="kwd" style="box-sizing: inherit; color: #f538a0;">import</span><span class="pln" color="inherit" style="box-sizing: inherit;"> </span><span class="str" style="box-sizing: inherit; color: #34a853;">'package:english_words/english_words.dart'</span><span class="pun" color="inherit" style="box-sizing: inherit;">;</span><span class="pln" color="inherit" style="box-sizing: inherit;"> </span></code></pre><p>Now to get the random words we use <span style="color: #2196f3; font-family: Consolas, monospace; font-size: 10.5pt;">WordPair</span><span style="background-color: white; color: #080808; font-family: Consolas, monospace; font-size: 10.5pt;">.</span><span style="color: #2196f3; font-family: Consolas, monospace; font-size: 10.5pt;">random</span><span style="background-color: white; color: #080808; font-family: Consolas, monospace; font-size: 10.5pt;">().</span><span style="color: #871094; font-family: Consolas, monospace; font-size: 10.5pt;">asPascalCase</span></p><p>This will return random word each time we click on hot reload or save the project.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8iVPVdXMoMis_bDRWgeMmkYHRTZH38lyeEwwSKSwZwrJZpO7jaReBra-tBjezimlXdONl2UAA8pqt9Lqh7Gdg8FvNXA1p7nM8S0F9TssPj57ZODNn7-n8WdguMowgx1fc8aPCdqxX288/s466/screen_flutter.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="466" data-original-width="379" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8iVPVdXMoMis_bDRWgeMmkYHRTZH38lyeEwwSKSwZwrJZpO7jaReBra-tBjezimlXdONl2UAA8pqt9Lqh7Gdg8FvNXA1p7nM8S0F9TssPj57ZODNn7-n8WdguMowgx1fc8aPCdqxX288/s320/screen_flutter.png" /></a></div><p>So here we saw StateLess widget in action. You can check the code on github repository below</p><p><a href="https://github.com/akash-bisariya/LearnFlutterApp">https://github.com/akash-bisariya/LearnFlutterApp</a><br /></p><p>In next blog post we will see how to create Stateful widgets which change on any user interaction.</p><p>Thanks for reading... </p><p><br /></p><p><br /></p><p><br /></p><p><br /></p><p> </p><br /><p></p>Akash Bisariyahttp://www.blogger.com/profile/09587286998959079329noreply@blogger.com0tag:blogger.com,1999:blog-5666881508464613799.post-56128048295898564002021-03-08T10:09:00.005-08:002021-03-08T23:01:38.985-08:002nd day with Flutter - Dive into Dart!! <p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW_RW5jj5sUOSrJo6q-LZkwGQN5T7N4kcXomHdvj3gm4WruxS6X1mWbuRAR-pVjXGheRdyuGHZrak1ULPiCrgauiGpjv0igjwdDP8TCntXdnyg2lMA4wIMVrwJcchtoqOs2OHy1xI5l2I/s320/flutter-logo-sharing.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="158" data-original-width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW_RW5jj5sUOSrJo6q-LZkwGQN5T7N4kcXomHdvj3gm4WruxS6X1mWbuRAR-pVjXGheRdyuGHZrak1ULPiCrgauiGpjv0igjwdDP8TCntXdnyg2lMA4wIMVrwJcchtoqOs2OHy1xI5l2I/s0/flutter-logo-sharing.png" /></a></div><br /><p></p><p>Hello Friends,</p><p>This is 2nd blog on this series #30DaysOfFlutter.</p><p>In the last blog we learn about how to install/setup the flutter. You can check my previous blog if you had not done it yet -</p><p><a href="https://bigakash.blogspot.com/2021/02/1st-day-with-flutter-hello-flutter.html">https://bigakash.blogspot.com/2021/02/1st-day-with-flutter-hello-flutter.html</a><br /></p><p>I know I am not able to post blog regularly but I will try now to be regular for this series.</p><p>So Lets Gets Start!!</p><p>As we know for flutter development the programming language used is #Dart which is made by Google, so in this post we will dive into dart language and try to get familiar with it so that we can start writing flutter applications.</p><p>Dart is an object oriented programming language and its syntax is very much smilar to java or other object oriented langauge. We will see here some important concepts/features/syntax that differentiate it with other languages -</p><p><b><u>1. Main function</u> - </b>Each app must have a top level main function as shown below -</p><pre class="prettyprint lang-dart prettyprinted" style="background-color: whitesmoke; border: none; box-sizing: border-box; font-family: "Roboto Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 0.875rem; margin-bottom: 1rem; margin-top: 0px; overflow: auto; padding: 30px;"><span class="com" style="box-sizing: border-box; color: #6e6e70;">// Entry point of the application</span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
</span><span class="typ" style="box-sizing: border-box; color: #660066;">void</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> main</span><span class="pun" style="box-sizing: border-box; color: #222222;">()</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="pun" style="box-sizing: border-box; color: #222222;">{</span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
</span><span class="kwd" style="box-sizing: border-box; color: #bc0056;">var</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> name </span><span class="pun" style="box-sizing: border-box; color: #222222;">=</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="pln" style="box-sizing: border-box;"><span style="color: #00677a;">'XYZ'</span></span><span class="pun" style="box-sizing: border-box; color: #222222;">;</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="com" style="box-sizing: border-box; color: #6e6e70;">// Declare and initialize a string variable.</span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
print</span><span class="pun" style="box-sizing: border-box; color: #222222;">(</span><span class="pun" style="box-sizing: border-box;"><span style="color: #7500a0;">name</span></span><span class="pun" style="box-sizing: border-box; color: #222222;">);</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="com" style="box-sizing: border-box; color: #6e6e70;">// Display name on console.</span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
</span><span class="pun" style="box-sizing: border-box; color: #222222;">}</span></pre><p><b><u>2. </u><u>Functions </u>- </b>Function are usually created in following way -</p><pre class="prettyprint lang-dart prettyprinted" style="background-color: whitesmoke; border: none; box-sizing: border-box; color: #212529; font-family: "Roboto Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 0.875rem; margin-bottom: 1rem; margin-top: 0px; overflow: auto; padding: 30px;"><span class="typ" style="box-sizing: border-box; color: #660066;">Integer</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> sun</span><span class="pun" style="box-sizing: border-box; color: #222222;">(Integer a, Integer b)</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="pun" style="box-sizing: border-box; color: #222222;">{</span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
</span>return<span face="SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace" style="color: #333333; font-size: 12px;"> a</span><span class="pl-k" face="SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; color: #d73a49; font-size: 12px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">+</span><span face="SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace" style="color: #333333; font-size: 12px;">b;</span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
</span><span class="pun" style="box-sizing: border-box; color: #222222;">}</span></pre>You just need to define return type, function name and function body to create a function. In Dart inserting the return type is even not required as it can use type inference to infer the return type.<div><br /><div>Arrow function can also be used which is a function with only one line of code for example -</div><div><br /></div><div><span class="pl-k" face="SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace" style="background: rgb(255, 255, 255); border: 0px; box-sizing: border-box; color: #d73a49; font-size: 12px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre;">void</span><span face="SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace" style="background-color: white; color: #24292e; font-size: 12px; white-space: pre;"> </span><span class="pl-en" face="SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace" style="background: rgb(255, 255, 255); border: 0px; box-sizing: border-box; color: #6f42c1; font-size: 12px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre;">printName</span><span face="SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace" style="background-color: white; color: #24292e; font-size: 12px; white-space: pre;">(</span><span class="pl-c1" face="SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace" style="background: rgb(255, 255, 255); border: 0px; box-sizing: border-box; color: #005cc5; font-size: 12px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre;">String</span><span face="SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace" style="background-color: white; color: #24292e; font-size: 12px; white-space: pre;"> name) </span><span class="pl-k" face="SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace" style="background: rgb(255, 255, 255); border: 0px; box-sizing: border-box; color: #d73a49; font-size: 12px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre;">=></span><span face="SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace" style="background-color: white; color: #24292e; font-size: 12px; white-space: pre;"> </span><span class="pl-en" face="SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace" style="background: rgb(255, 255, 255); border: 0px; box-sizing: border-box; color: #6f42c1; font-size: 12px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre;">print</span><span face="SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace" style="background-color: white; color: #24292e; font-size: 12px; white-space: pre;">(name);</span></div><div><span face="SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace" style="background-color: white; color: #24292e; font-size: 12px; white-space: pre;"><br /></span></div><div><b><u>3. Function Parameters</u> - </b>A function can have 2 types of parameters : Required & Optional</div><div>The optional parameter can be of two types - Named & Positional.</div><div><br /></div><div>Lets see an example of 'Named' parameter first which are declared using curly brackets <b>({})</b>.</div><div><br /></div><div><pre class="prettyprint lang-dart prettyprinted" style="background-color: whitesmoke; border: none; box-sizing: border-box; font-family: "Roboto Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 0.875rem; margin-bottom: 1rem; margin-top: 0px; overflow: auto; padding: 30px;"><span class="com" style="box-sizing: border-box; color: #6e6e70;">/// Two optional parameters - firstName & <span style="color: #7500a0;">last</span><span style="color: #212529; font-size: 0.875rem;">Name</span></span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
</span><span class="typ" style="box-sizing: border-box; color: #660066;">void</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> printHelloWorld</span><span class="pun" style="box-sizing: border-box; color: #222222;">({</span><span class="typ" style="box-sizing: border-box; color: #660066;">String</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> firstName</span><span class="pun" style="box-sizing: border-box; color: #222222;">,</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="typ" style="box-sizing: border-box; color: #660066;">String</span><span class="typ" style="box-sizing: border-box;"><span style="color: #7500a0;"> last</span></span><span style="color: #212529;">Name})</span><span class="pln" style="box-sizing: border-box; color: #7500a0; font-size: 0.875rem;"> </span><span class="pun" style="box-sizing: border-box; color: #222222; font-size: 0.875rem;">{ print(...) }</span></pre></div><div>We can call this function as -</div><div><pre class="prettyprint lang-dart prettyprinted" style="background-color: whitesmoke; border: none; box-sizing: border-box; font-family: "Roboto Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 0.875rem; margin-bottom: 1rem; margin-top: 0px; overflow: auto; padding: 30px;"><span class="pln" style="box-sizing: border-box; color: #7500a0;">printHelloWorld</span><span class="pun" style="box-sizing: border-box; color: #222222;">(</span><span style="color: #212529;">firstName:</span><span class="pln" style="box-sizing: border-box; color: #7500a0; font-size: 0.875rem;"> </span><span class="pln" style="box-sizing: border-box; font-size: 0.875rem;"><span style="color: #bc0056;">'ABCD'</span></span><span class="pun" style="box-sizing: border-box; color: #222222; font-size: 0.875rem;">,</span><span class="pln" style="box-sizing: border-box; color: #7500a0; font-size: 0.875rem;"> </span><span style="color: #7500a0;">last</span><span style="color: #212529; font-size: 0.875rem;">Name</span>:<span class="pln" style="box-sizing: border-box; color: #7500a0; font-size: 0.875rem;"> </span><span class="pln" style="box-sizing: border-box; font-size: 0.875rem;"><span style="color: #bc0056;">'EFGH'</span></span><span class="pun" style="box-sizing: border-box; color: #222222; font-size: 0.875rem;">);</span></pre></div><div>Also If required you can make 'Named' parameters mandatory in a function by annotating them with @required attribute.</div><div><br /></div><div>To declare 'Positional' parameters we need to use square brackets <b>([])</b>. Following is an example of it -</div><div><br /></div><div><pre class="prettyprint lang-dart prettyprinted" style="background-color: whitesmoke; border: none; box-sizing: border-box; color: #212529; font-family: "Roboto Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 0.875rem; margin-bottom: 1rem; margin-top: 0px; overflow: auto; padding: 30px;"><span class="typ" style="box-sizing: border-box; color: #660066;">String</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> printMessage</span><span class="pun" style="box-sizing: border-box; color: #222222;">(</span><span class="typ" style="box-sizing: border-box; color: #660066;">String</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> firstName</span><span class="pun" style="box-sizing: border-box; color: #222222;">,</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="typ" style="box-sizing: border-box; color: #660066;">String</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> lastNAme</span><span class="pun" style="box-sizing: border-box; color: #222222;">,</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="pun" style="box-sizing: border-box; color: #222222;">[</span><span class="typ" style="box-sizing: border-box; color: #660066;">String</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> message</span><span class="pun" style="box-sizing: border-box; color: #222222;">])</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="pun" style="box-sizing: border-box; color: #222222;">{</span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
</span><span class="kwd" style="box-sizing: border-box; color: #bc0056;">var</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> text </span><span class="pun" style="box-sizing: border-box; color: #222222;">=</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="str" style="box-sizing: border-box; color: #00677a;">'Hello $firstName $lastNAme'<span class="pun" style="box-sizing: border-box; color: #222222; font-size: 0.875rem;">;</span><br /></span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="kwd" style="box-sizing: border-box; color: #bc0056;">if</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="pun" style="box-sizing: border-box; color: #222222;">(</span><span class="pln" style="box-sizing: border-box; color: #7500a0;">message </span><span class="pun" style="box-sizing: border-box; color: #222222;">!=</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="kwd" style="box-sizing: border-box; color: #bc0056;">null</span><span class="pun" style="box-sizing: border-box; color: #222222;">)</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="pun" style="box-sizing: border-box; color: #222222;">{</span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
text <span class="pun" style="box-sizing: border-box; color: #222222; font-size: 0.875rem;">=</span><span class="pln" style="box-sizing: border-box; font-size: 0.875rem;"> </span><span class="str" style="box-sizing: border-box; color: #00677a; font-size: 0.875rem;">'$result $message!!'<span class="pun" style="box-sizing: border-box; color: #222222; font-size: 0.875rem;">;</span></span><br /></span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="pun" style="box-sizing: border-box; color: #222222;">}</span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
</span><span class="kwd" style="box-sizing: border-box; color: #bc0056;">return</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span>text;<br /><span class="pun" style="box-sizing: border-box; color: #222222;">}</span></pre></div><div>You can call this function with or without the 'message' parameter as -</div><div><br /></div><div><pre class="prettyprint lang-dart prettyprinted" style="background-color: whitesmoke; border: none; box-sizing: border-box; color: #212529; font-family: "Roboto Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 0.875rem; margin-bottom: 1rem; margin-top: 0px; overflow: auto; padding: 30px;">printMessage(<span class="str" style="box-sizing: border-box; color: #00677a; font-size: 0.875rem;">'Akash'</span><span class="pun" style="box-sizing: border-box; color: #222222; font-size: 0.875rem;">,</span><span class="pln" style="box-sizing: border-box; color: #7500a0; font-size: 0.875rem;"> </span><span class="str" style="box-sizing: border-box; color: #00677a; font-size: 0.875rem;">'Bisariya'</span><span class="pun" style="box-sizing: border-box; color: #222222; font-size: 0.875rem;">); // Hello Akash Bisariya</span></pre><pre class="prettyprint lang-dart prettyprinted" style="background-color: whitesmoke; border: none; box-sizing: border-box; color: #212529; font-family: "Roboto Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 0.875rem; margin-bottom: 1rem; margin-top: 0px; overflow: auto; padding: 30px;">printMessage('Akash', 'Bisariya', 'Good evening') // Hello Akash Bisariya GoodEvening!!</pre></div><div> </div><div><span face="SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace" style="background-color: white; color: #24292e; font-size: 12px; white-space: pre;"><br /></span></div><div><b><u>4. Variables</u> - </b>Dart does not have keywords public, protected and private. If an identifier starts with an underscore ( _ ) , it will be private to its library/dart app. You can also use 'var' keyword to create a variable -</div><div><br /></div><div><pre class="prettyprint lang-dart prettyprinted" style="background-color: whitesmoke; border: none; box-sizing: border-box; color: #212529; font-family: "Roboto Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 0.875rem; margin-bottom: 1rem; margin-top: 0px; overflow: auto; padding: 30px;"><span class="kwd" style="box-sizing: border-box; color: #bc0056;">var</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> name </span><span class="pun" style="box-sizing: border-box; color: #222222;">=</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="str" style="box-sizing: border-box; color: #00677a;">'XYZ'</span><span class="pun" style="box-sizing: border-box; color: #222222;">;</span></pre></div><div>Dart language has some built in types -</div><div><ul style="background-color: white; box-sizing: border-box; color: #4a4a4a; font-family: Roboto, sans-serif; font-size: 16px; margin-bottom: 1rem; margin-top: 0px;"><li style="box-sizing: border-box;"><b>numbers</b> - It's further divided into 2 types - integers(int) & doubles(double)</li><li style="box-sizing: border-box;"><b>strings </b>- You can use either single '' or double "" quotes to create string.</li><li style="box-sizing: border-box;"><b>booleans - </b></li><li style="box-sizing: border-box;"><b>lists</b> (also known as <em style="box-sizing: border-box;">arrays</em>)</li><li style="box-sizing: border-box;"><b>sets</b></li><li style="box-sizing: border-box;"><b>maps</b></li><li style="box-sizing: border-box;"><b>runes</b> (for expressing Unicode characters in a string such as laughing emojis)</li><li style="box-sizing: border-box;"><b>symbols </b>(these are compile time constants)</li></ul><div><b><u>5. Classes</u> - </b>You can define a class simply by using 'class' keyword followed by its name. You can create object of this class by using its constructor. To define class constructor we have 2 ways -</div><div>1) Generative constructor & 2) Named constructor.</div></div><div>Follwing is an example of both -</div><div><pre class="prettyprint lang-dart prettyprinted" style="background-color: whitesmoke; border: none; box-sizing: border-box; font-family: "Roboto Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 0.875rem; margin-bottom: 1rem; margin-top: 0px; overflow: auto; padding: 30px;"><span class="kwd" style="box-sizing: border-box; color: #bc0056;">class Person</span><span class="kwd" style="box-sizing: border-box;"><span style="color: #222222;">{ String name; String lastName; String this.age;</span></span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
</span><span class="pun" style="box-sizing: border-box;"><span style="color: #6e6e70;">Person(this.name, this.lastName); Person.newEntry(){this.age=0} </span></span>}</pre></div><div><pre class="prettyprint lang-dart prettyprinted" style="background-color: whitesmoke; border: none; box-sizing: border-box; color: #212529; font-family: "Roboto Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 0.875rem; margin-bottom: 1rem; margin-top: 0px; overflow: auto; padding: 30px;"><span class="kwd" style="box-sizing: border-box; color: #bc0056;">var</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> p1 </span><span class="pun" style="box-sizing: border-box; color: #222222;">=</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="kwd" style="box-sizing: border-box; color: #bc0056;">new</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span>Person(<span class="lit" style="box-sizing: border-box; color: #00677a; font-size: 0.875rem;">2</span><span class="pun" style="box-sizing: border-box; color: #222222; font-size: 0.875rem;">,</span><span class="pln" style="box-sizing: border-box; color: #7500a0; font-size: 0.875rem;"> </span><span class="lit" style="box-sizing: border-box; color: #00677a; font-size: 0.875rem;">2</span><span class="pun" style="box-sizing: border-box; color: #222222; font-size: 0.875rem;">);</span><br /><span class="kwd" style="box-sizing: border-box; color: #bc0056;">var</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> p2 </span><span class="pun" style="box-sizing: border-box; color: #222222;">=</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="kwd" style="box-sizing: border-box; color: #bc0056;">new</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span>Person.newEntry(<span class="pun" style="box-sizing: border-box; color: #222222; font-size: 0.875rem;">);</span></pre></div><div><b><u>6. Mixins</u> - </b>Its a relatively new feature when comapring with other object oriented language like java.</div><div>By 'Mixin' we can reuse the class code in mulitple class hiearchies. Dart uses 'with' keyword for this feature.</div><div><pre class="prettyprint lang-dart prettyprinted" style="background-color: whitesmoke; border: none; box-sizing: border-box; font-family: "Roboto Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 0.875rem; margin-bottom: 1rem; margin-top: 0px; overflow: auto; padding: 30px;"><span class="kwd" style="box-sizing: border-box; color: #bc0056;">class</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="typ" style="box-sizing: border-box; color: #660066;">A extends object</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="pun" style="box-sizing: border-box; color: #222222;">{</span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
</span><span class="pln" style="box-sizing: border-box;"><span style="color: #660066;">.....</span></span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
</span><span class="typ" style="box-sizing: border-box; color: #660066;">void</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> printMessgae</span><span class="pun" style="box-sizing: border-box; color: #222222;">()</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="pun" style="box-sizing: border-box; color: #222222;">{</span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
print("This is mixin class")</span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
</span><span class="pun" style="box-sizing: border-box; color: #222222;">}</span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
</span><span class="pun" style="box-sizing: border-box; color: #222222;">}</span></pre></div><div><pre class="prettyprint lang-dart prettyprinted" style="background-color: whitesmoke; border: none; box-sizing: border-box; font-family: "Roboto Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 0.875rem; margin-bottom: 1rem; margin-top: 0px; overflow: auto; padding: 30px;"><code style="box-sizing: border-box; font-family: "Roboto Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: inherit; overflow-wrap: break-word; word-break: normal;"><span class="kwd" style="box-sizing: border-box; color: #bc0056;">class</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="typ" style="box-sizing: border-box; color: #660066;">B</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="kwd" style="box-sizing: border-box; color: #bc0056;">with</span><span class="pln" style="box-sizing: border-box; color: #7500a0;"> </span><span class="pln" style="box-sizing: border-box;"><span style="color: #660066;">A</span></span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
</span><span class="pun" style="box-sizing: border-box; color: #222222;">{</span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
....</span><span class="pln" style="box-sizing: border-box; color: #7500a0;">
</span><span class="pun" style="box-sizing: border-box; color: #222222;">}</span></code></pre></div><div><p>Now you can use the 'printMessage' method with the object of class B.</p><p>You can only extend the 'Mixin' class with Object class.</p><p><br /></p><p>So friends these are some features of Dart language, we will use these features when developing the Flutter applications later.</p><p>For more detailed review of Dart language you can use the following official Doc -</p><p><a href="https://dart.dev/guides/language/language-tour">https://dart.dev/guides/language/language-tour</a><br /></p><p>Thanks for reading. From next post we will start developing the Flutter application.</p></div></div>Akash Bisariyahttp://www.blogger.com/profile/09587286998959079329noreply@blogger.com0tag:blogger.com,1999:blog-5666881508464613799.post-14651978049676883412021-02-03T12:01:00.002-08:002021-02-03T12:09:24.268-08:001st day with flutter - Hello Flutter!!<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu4Gtn9A2b2AZTI6UhfvB9mVLSbSTQxUmCMS8oF0C9Uf8r5-ecr2c1cg_kdz10wPluwnsPOG_2nmh5PaNTAjT4R2Gpe3SFh6ehZoTOBtRHrUkeTCoLTVJSBuD0FNVpQdERmTLt6gLFuiA/s937/flutter-logo-sharing.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="461" data-original-width="937" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu4Gtn9A2b2AZTI6UhfvB9mVLSbSTQxUmCMS8oF0C9Uf8r5-ecr2c1cg_kdz10wPluwnsPOG_2nmh5PaNTAjT4R2Gpe3SFh6ehZoTOBtRHrUkeTCoLTVJSBuD0FNVpQdERmTLt6gLFuiA/s320/flutter-logo-sharing.png" width="320" /></a></div><p>Hi Friends,</p><p>I am here with you to share the First day experience of #30DaysOfFlutter.</p><p>In this series we will learn flutter together!!</p><p>So we will run today hello world application using flutter step by step.</p><p><b><u>First Step - Installation</u></b></p><p>This is the most tricky part for any new developer who is started learning Flutter. Go through following steps of installing flutter sdk.</p><p>First you need to go to flutter get-started link as below -</p><p><a href="https://flutter.dev/docs/get-started/install">https://flutter.dev/docs/get-started/install</a><br /></p><p>You need to select you operating system here for downloading the Flutter installation bundle.</p><p>Here I will go for the windows OS but the steps for all the OS will be same.</p><p>After downloading extract the zip file and place the <b>flutter</b> folder in the desired directory for ex - <span face="Roboto, sans-serif" style="background-color: white; color: #4a4a4a; font-size: 16px;"> </span><code class="language-plaintext highlighter-rouge" style="background-color: white; box-sizing: border-box; color: #008f83; font-family: "Roboto Mono", monospace; font-size: 14px; overflow-wrap: break-word;">C:\src\flutter</code></p><p><b><u>Second Step - Add Environment Variable</u></b></p><p>This<b> </b>is the second important step before running our first Flutter application. </p><p>In this we will add Flutter to <i>Path</i> environment variable. So first type <i>'env' </i>in the start bar and select<i> Edit Environment variables for your account</i>.</p><p>Now under <i>User variable</i> check if there is an entry called <i>'Path'</i></p><ul style="background-color: white; box-sizing: border-box; color: #4a4a4a; font-family: Roboto, sans-serif; font-size: 16px; margin-bottom: 0px; margin-top: 0px;"><li style="box-sizing: border-box;">If the entry exists, append the full path to <code class="language-plaintext highlighter-rouge" style="box-sizing: border-box; color: #008f83; font-family: "Roboto Mono", monospace; font-size: 14px; overflow-wrap: break-word;">flutter\bin</code> using <code class="language-plaintext highlighter-rouge" style="box-sizing: border-box; color: #008f83; font-family: "Roboto Mono", monospace; font-size: 14px; overflow-wrap: break-word;">;</code> as a separator from existing values.</li><li style="box-sizing: border-box;">If the entry doesn’t exist, create a new user variable named <code class="language-plaintext highlighter-rouge" style="box-sizing: border-box; color: #008f83; font-family: "Roboto Mono", monospace; font-size: 14px; overflow-wrap: break-word;">Path</code> with the full path to <code class="language-plaintext highlighter-rouge" style="box-sizing: border-box; color: #008f83; font-family: "Roboto Mono", monospace; font-size: 14px; overflow-wrap: break-word;">flutter\bin</code> as its value.</li></ul><div><br /></div><p style="text-align: left;">This step is also required to run Flutter commands in terminal.</p><p style="text-align: left;"><b><u>Third Step - Run Flutter Doctor</u></b></p><p style="text-align: left;">From the terminal window goto the Flutter directory and run the following command -</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV_7J0KpkGzKyvoVU8U7gBq3c9SZHmks0ua9wdqEngFywhkWACi5JwFgZkVXlbgpCCkLPiu85C1qVvTU02DBjwXxR98xATc9JQyQNPQpOmgBgQPpfWejM7kfHhdlSx7VJbYF50z3QC8b8/s612/flutter_doctor.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="301" data-original-width="612" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV_7J0KpkGzKyvoVU8U7gBq3c9SZHmks0ua9wdqEngFywhkWACi5JwFgZkVXlbgpCCkLPiu85C1qVvTU02DBjwXxR98xATc9JQyQNPQpOmgBgQPpfWejM7kfHhdlSx7VJbYF50z3QC8b8/s320/flutter_doctor.png" width="320" /></a></div><p>This command will check your environment and displays a report of the status of our Flutter installation.</p><p><b><u>Final Step - Set up IDE :- Android Studio</u></b></p><p>Android studio offers a complete IDE experience for Flutter. You can also use others IDEs such as <i>IntelliJ</i> for an Android developer android studio is preferrable option. </p><p>Start Android Studio and open Plugins from menu. Search for Flutter plugin and install that. Click yes when prompted to install the Dart plugin.</p><p>Now restart the Android Studio.</p><p><b><u>Create Flutter Project</u></b></p><p>Start a new Flutter project from File --> New.</p><p>Select Flutter application as the project type then click on Next.</p><p>Verify the Flutter Sdk path specifies the SDK's location. If this field is empty then provide the Flutter SDK path here - for example</p><p><span class="kd" style="background-color: #f8f9fa; box-sizing: border-box; color: #1fbaac; font-family: "Roboto Mono", monospace; font-size: inherit;">C</span><span color="inherit" style="background-color: #f8f9fa; font-family: "Roboto Mono", monospace; font-size: inherit;">:\src\flutter</span></p><p>Enter the project name and then click on Next. </p><p>Click finish.</p><p>Wait for android studio to create the project.</p><p>You may need to configure the Dart Sdk path if <i>Dart not configure</i> error is coming after the project creation.</p><p>You can provide Dart sdk path as below -</p><p><span face="Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif" style="background-color: #e4e6e8; color: #242729; font-size: 13px; white-space: pre-wrap;">c:\src\flutter\bin\cache\dart-sdk</span></p><p><b><u>Run your First Flutter App now</u></b></p><p>In the android studio toolbar select the android device emulator before running your first app. You can also connect your own device via Usb and run the app on the device.</p><p>Yeah we have done that!!!</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD0MjdWMVaSzW5ftghXn5zDT-WEuzAJ8-fCfu8H6eSt12Xn2DIWd5Zc2lh53Tt2DxJZUKoGYPaEnRlD68GDOjP5i6znLSwPJVjBWSi2ypz9WRmUYHxGTjxdps1UyCNhGNoVWGnjfDWGlM/s805/flutter_app_run.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="805" data-original-width="475" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD0MjdWMVaSzW5ftghXn5zDT-WEuzAJ8-fCfu8H6eSt12Xn2DIWd5Zc2lh53Tt2DxJZUKoGYPaEnRlD68GDOjP5i6znLSwPJVjBWSi2ypz9WRmUYHxGTjxdps1UyCNhGNoVWGnjfDWGlM/s320/flutter_app_run.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div>This is our first Flutter app running in the device. <div><br /></div><div>So we have completed the first day with flutter and running our sample flutter application.</div><div><br /></div><div>You can find the source code on my github repository -</div><div><br /></div><div><a href="https://github.com/akash-bisariya/FirstFlutterApp">https://github.com/akash-bisariya/FirstFlutterApp</a><br /><div><br /></div><div>Thanks guys please do post any question or issue in the comments.</div><div><br /></div><div><br /><p><br /></p><p><br /></p><p><b><br /></b></p><p> </p><p><br /></p></div></div>Akash Bisariyahttp://www.blogger.com/profile/09587286998959079329noreply@blogger.com0tag:blogger.com,1999:blog-5666881508464613799.post-52411566651916214582021-02-01T06:38:00.002-08:002022-10-04T04:39:05.469-07:00Flutter Learning Series <p>Hello Everyone,</p><p>Here I am exciting to share with you a new blog series based on #30DaysOfFlutter. I was waiting for the event like this to learn the Flutter from the basic since long time.</p><p>Flutter is basically an open source cross platform software development kit to develop applications not only for mobiles but also for desktop clients like Windows, Linux or Mac.</p><p>The course #30DaysOfFlutter is created by Google which says that by the end of 30 days we will have 1 month of Flutter experience and we will be on the way to create our first Flutter app.</p><p><b>I am really excited now:) </b></p><p>It will be starting from 1st Feb 2020. Although the registrations are closed now for this course but I will be sharing all my learnings of this course on this blog over the next month onwards.</p><p>You can also let me know your views in the comments.</p><p>Thanks.</p>Akash Bisariyahttp://www.blogger.com/profile/09587286998959079329noreply@blogger.com1tag:blogger.com,1999:blog-5666881508464613799.post-48226372581473532292017-05-11T03:16:00.002-07:002018-05-30T03:53:45.285-07:00Retrofit Offline Caching or Response Caching in Android<div dir="ltr" style="text-align: left;" trbidi="on">
Hello friends,<br />
<br />
Today I am posting about the caching in Retrofit, a network library in Android.<br />
<br />
As we know caching is controlled by the Http Headers which are sent by the server in response.<br />
Here we a use a powerful feature of Retrofit library of Intercepting the Request or Reponses.Interceptors are used to intercept and modify the request and responses.<br />
<br />
We can use the caching in two ways -<br />
<br />
1. There are some cases when identical request is made within a small period of time such as within 60 seconds, in such cases we can use cache to fetch the same response of the request that was fetched last time instead of makig a new API request.<br />
<br />
2.Also we can use the response that was last fetched so that we can show the same response when the device is offline.<br />
<br />
First create "ResponseCachingInterceptor" class that implements the Interceptor interface from okhttp class as below.<br />
This is basically used for caching the network response for a minute.<br />
<br />
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"> <span style="color: navy; font-weight: bold;">private static class </span>ResponseCaching<span style="font-family: "times new roman"; font-size: small; white-space: normal;">Interceptor</span> <span style="color: navy; font-weight: bold;">implements </span>Interceptor {
<span style="color: olive;">@Override</span></pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"><span style="color: navy; font-size: 9pt; font-weight: bold;"> public </span><span style="font-size: 9pt;">Response intercept(Chain chain) </span><span style="color: navy; font-size: 9pt; font-weight: bold;">throws </span><span style="font-size: 9pt;">IOException {</span></pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"> Response response = chain.proceed(chain.request());
<span style="color: navy; font-weight: bold;">return </span>response.newBuilder()
.removeHeader(<span style="color: green; font-weight: bold;">"Pragma"</span>)
.removeHeader(<span style="color: green; font-weight: bold;">"Access-Control-Allow-Origin"</span>)
.removeHeader(<span style="color: green; font-weight: bold;">"Vary"</span>)<span style="color: grey; font-style: italic;">
</span><span style="color: grey; font-style: italic;"> </span>.removeHeader(<span style="color: green; font-weight: bold;">"Cache-Control"</span>)
.header(<span style="color: green; font-weight: bold;">"Cache-Control"</span>, <span style="color: green; font-weight: bold;">"public, max-age=60"</span>)
.build();
}
}</pre>
<br />
Here we overiding the intercept method.<br />
The "chain.proceed" returns the reponse of the Api request and then we modify its headers to implement caching.<br />
First we remove some headers such as "Pragma","Cache-Control" and others to remove misconfiguration in these headers.<br />
And then we add the "Cache-Control" header that is responsible for the caching.Here we use "max-age=60" to set the time-frame of 60 seconds.<br />
<br />
Now we will create the "<span style="background-color: #e4e4ff; font-family: "dejavu sans mono"; font-size: 9pt;">OfflineResponseCacheInterceptor</span>" for offline cache handling as below-<br />
<br />
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"> <span style="font-size: 9pt;"> </span><span style="color: navy; font-size: 9pt; font-weight: bold;">private static class </span><span style="font-size: 9pt;">OfflineResponseCacheInterceptor </span><span style="color: navy; font-size: 9pt; font-weight: bold;">implements </span><span style="font-size: 9pt;">Interceptor {</span></pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"> <span style="color: olive;">@Override</span><span style="color: olive;"> </span></pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"><span style="color: navy; font-weight: bold;"> public </span>okhttp3.Response intercept(Chain chain) <span style="color: navy; font-weight: bold;">throws </span>IOException {
Request request = chain.request();
NetworkInfo networkInfo =((ConnectivityManager) </pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"> (<span style="color: #660e7a; font-style: italic;">context</span>.getSystemService(Context.<span style="color: #660e7a; font-style: italic; font-weight: bold;">CONNECTIVITY_SERVICE</span>))).getActiveNetworkInfo();
<span style="color: navy; font-weight: bold;">if </span>(networkInfo==<span style="color: navy; font-weight: bold;">null</span>) {
request = request.newBuilder()
.removeHeader(<span style="color: green; font-weight: bold;">"Pragma"</span>)
.removeHeader(<span style="color: green; font-weight: bold;">"Access-Control-Allow-Origin"</span>)
.removeHeader(<span style="color: green; font-weight: bold;">"Vary"</span>)<span style="color: grey; font-style: italic;">
</span><span style="color: grey; font-style: italic;"> </span>.removeHeader(<span style="color: green; font-weight: bold;">"Cache-Control"</span>)
.header(<span style="color: green; font-weight: bold;">"Cache-Control"</span>,
<span style="color: green; font-weight: bold;">"public, only-if-cached, max-stale=</span> <span style="color: blue;">60"</span>)
.build();
}
<span style="color: navy; font-weight: bold;">return </span>chain.proceed(request);
}
}</pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;">Here again we remove some header and the override the "Cache-Control" header as </pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"><span style="color: green; font-size: 9pt; font-weight: bold;">"public, only-if-cached, max-stale=60"</span></pre>
Here max-stale=60 denotes the expiration of cached response.After that time it will return with status code = 504 if network is not available otherwise it will revalidate the response from the server.<br />
<br />
<br />
Now you can apply these interceptors to the okhttpclient as given below-<br />
<br />
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"><pre style="font-family: "DejaVu Sans Mono"; font-size: 9pt;">OkHttpClient okHttpClient = <span style="color: navy; font-weight: bold;">new </span>OkHttpClient.Builder()</pre>
<pre style="font-family: "DejaVu Sans Mono"; font-size: 9pt;"> //Enable Response Caching
.addNetworkInterceptor(<span style="color: navy; font-weight: bold;">new </span>ResponseCachingInterceptor())</pre>
<pre style="font-family: "DejaVu Sans Mono"; font-size: 9pt;"> //Enable Offline Response Caching
.addInterceptor(<span style="color: navy; font-weight: bold;">new </span>OfflineResponseCacheInterceptor())
.cache(cache)
.build();</pre>
<pre style="font-family: "DejaVu Sans Mono"; font-size: 9pt;"></pre>
<pre style="font-family: "DejaVu Sans Mono"; font-size: 9pt;">And that's all we need to implement caching in Retrofit.</pre>
<pre style="font-family: "DejaVu Sans Mono"; font-size: 9pt;"><span style="color: #333333; font-family: "inconsolata"; font-size: 16px; white-space: normal;">The above approach to caching is what Retrofit uses and it works pretty well if the right headers are sent.You just have to define the cache location and headers, everything is pretty much handled by the library.</span></pre>
</pre>
</div>
Akash Bisariyahttp://www.blogger.com/profile/09587286998959079329noreply@blogger.com1tag:blogger.com,1999:blog-5666881508464613799.post-4432215916668536152016-05-23T05:11:00.002-07:002021-02-01T06:49:55.824-08:00Video Encryption and Decryption in Android<div dir="ltr" style="text-align: left;" trbidi="on">
Hi friends,<br />
<br />
Today I will write about the video encryption and decryption in android.<br />
In video encryption we convert a sample video into a encrypted format that cannot be played by any media player. It can only be played after the decryption of that video using private key.<br />
We encrypt the video by encrypting the small chunks of video one by one since the issue of memory constraint in Android.<br />
If we had to encrypt the whole file we have to load the complete file into RAM which would have caused "OutOfMemoryEncryption" leading to crash.<br />
<br />
Here is the Encrypter class i have created for Encrypting and Decrypting the video files.<br />
<br />
In Encrypt method we have 4 parameters-<br />
<br />
1.Secret Key ----- key used to encrypt and decrypt file<br />
<br />
2.AlgorithParameterSpec ---- parameter required for algorithm used in this process<br />
<br />
3.Input Stream ------ Video file in Input stream format<br />
<br />
4.Output Stream ------ decrypted video file from the encrypted file<br />
<br />
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"><span style="color: navy; font-weight: bold;">public class </span>Encrypter {
<span style="color: navy; font-weight: bold;">private final static int </span><span style="color: #660e7a; font-style: italic; font-weight: bold;">DEFAULT_READ_WRITE_BLOCK_BUFFER_SIZE </span>= <span style="color: blue;">1024</span>;
<span style="color: navy; font-weight: bold;">private final static </span>String <span style="color: #660e7a; font-style: italic; font-weight: bold;">ALGO_VIDEO_ENCRYPTOR </span>= <span style="color: green; font-weight: bold;">"AES/CBC/PKCS5Padding"</span>;
<span style="color: olive;">@SuppressWarnings</span>(<span style="color: green; font-weight: bold;">"resource"</span>)
<span style="color: navy; font-weight: bold;">public static void </span>encrypt(SecretKey key, </pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"> AlgorithmParameterSpec paramSpec, InputStream <span style="background-color: #e4e4ff;">in</span>, OutputStream out)
<span style="color: navy; font-weight: bold;">throws </span>NoSuchAlgorithmException, NoSuchPaddingException, InvalidKeyException,
InvalidAlgorithmParameterException, IOException {
<span style="color: navy; font-weight: bold;">try </span>{
Cipher c = Cipher.<span style="font-style: italic;">getInstance</span>(<span style="color: #660e7a; font-style: italic; font-weight: bold;">ALGO_VIDEO_ENCRYPTOR</span>);
c.init(Cipher.<span style="color: #660e7a; font-style: italic; font-weight: bold;">ENCRYPT_MODE</span>, key, paramSpec);
out = <span style="color: navy; font-weight: bold;">new </span>CipherOutputStream(out, c);
<span style="color: navy; font-weight: bold;">int </span>count = <span style="color: blue;">0</span>;
<span style="color: navy; font-weight: bold;">byte</span>[] buffer = <span style="color: navy; font-weight: bold;">new byte</span>[<span style="color: #660e7a; font-style: italic; font-weight: bold;">DEFAULT_READ_WRITE_BLOCK_BUFFER_SIZE</span>];
<span style="color: navy; font-weight: bold;">while </span>((count = <span style="background-color: #e4e4ff;">in</span>.read(buffer)) >= <span style="color: blue;">0</span>) {
out.write(buffer, <span style="color: blue;">0</span>, count);
}
} <span style="color: navy; font-weight: bold;">finally </span>{
out.close();
}
}
<span style="color: olive;">@SuppressWarnings</span>(<span style="color: green; font-weight: bold;">"resource"</span>)
<span style="color: navy; font-weight: bold;">public static void </span>decrypt(SecretKey key, AlgorithmParameterSpec paramSpec, </pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"> InputStream in, OutputStream out)
<span style="color: navy; font-weight: bold;">throws </span>NoSuchAlgorithmException, NoSuchPaddingException, InvalidKeyException,
InvalidAlgorithmParameterException, IOException {
<span style="color: navy; font-weight: bold;">try </span>{
Cipher c = Cipher.<span style="font-style: italic;">getInstance</span>(<span style="color: #660e7a; font-style: italic; font-weight: bold;">ALGO_VIDEO_ENCRYPTOR</span>);
c.init(Cipher.<span style="color: #660e7a; font-style: italic; font-weight: bold;">DECRYPT_MODE</span>, key, paramSpec);
out = <span style="color: navy; font-weight: bold;">new </span>CipherOutputStream(out, c);
<span style="color: navy; font-weight: bold;">int </span>count = <span style="color: blue;">0</span>;
<span style="color: navy; font-weight: bold;">byte</span>[] buffer = <span style="color: navy; font-weight: bold;">new byte</span>[<span style="color: #660e7a; font-style: italic; font-weight: bold;">DEFAULT_READ_WRITE_BLOCK_BUFFER_SIZE</span>];
<span style="color: navy; font-weight: bold;">while </span>((count = in.read(buffer)) >= <span style="color: blue;">0</span>) {
out.write(buffer, <span style="color: blue;">0</span>, count);
}
} <span style="color: navy; font-weight: bold;">finally </span>{
out.close();
}
}
}</pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"></pre>
Now we use this class in our MainActivity to decrypt and encrypt video files.<br />
<br />
Here I access video files of my phone and store in a arraylist named "<span style="background-color: white; color: #660e7a; font-family: "dejavu sans mono"; font-size: 9pt; font-weight: bold;">listOfVideo</span>".<br />
I use "path" variable to store a particular video path saved our phone's sdcard.<br />
Then i created 3 files namely --- <br />
1. InFile<br />
2. OutFile<br />
3. OutFile Dec<br />
<br />
"InFile" is the video file we have to encrypted.<br />
"OutFile" is the encrypted file afer encryption process.<br />
"OutFile Dec" is the decrypted video file from the one we encrypted so we can play this video.<br />
<br />
Then We use a automatically generated <span style="background-color: white; font-family: "dejavu sans mono"; font-size: 9pt;">SecretKey "key" that we have generated using </span>Algorithm "AES".Now we have to store this key to use it later in decrypting the video file. I store it in "keyData"<br />
"key2" is generated from this "keyData" and used in decrypting the video we have encrypted.<br />
<br />
At last we have to generate initialization vector "iv" to create the AlgorithParameterSpec parameter of algorithm<br />
And now we use the Encrpyt and Decrypt methods of Encryptor class to First encrypt the video and then decrypt it...............<br />
<br />
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"><span style="color: navy; font-weight: bold;">public class </span>MainActivity <span style="color: navy; font-weight: bold;">extends </span>AppCompatActivity {
<span style="color: navy; font-weight: bold;">private final static </span>String <span style="color: #660e7a; font-style: italic; font-weight: bold;">ALGO_RANDOM_NUM_GENERATOR </span>= <span style="color: green; font-weight: bold;">"SHA1PRNG"</span>;
<span style="color: navy; font-weight: bold;">private final static </span>String <span style="color: #660e7a; font-style: italic; font-weight: bold;">ALGO_SECRET_KEY_GENERATOR </span>= <span style="color: green; font-weight: bold;">"AES"</span>;
<span style="color: navy; font-weight: bold;">private final static int </span><span style="color: #660e7a; font-style: italic; font-weight: bold;">IV_LENGTH </span>= <span style="color: blue;">16</span>;
Cursor <span style="color: #660e7a; font-weight: bold;">mVideoCursor</span>;
ArrayList<HashMap<String, String>> <span style="color: #660e7a; font-weight: bold;">listOfVideo</span>;
<span style="color: olive;">@Override</span><span style="color: olive;"> </span><span style="color: navy; font-weight: bold;">protected void </span>onCreate(Bundle savedInstanceState) {
<span style="color: navy; font-weight: bold;">super</span>.onCreate(savedInstanceState);
setContentView(R.layout.<span style="color: #660e7a; font-style: italic; font-weight: bold;">activity_main</span>);
<span style="color: #660e7a; font-weight: bold;">listOfVideo </span>= <span style="color: navy; font-weight: bold;">new </span>ArrayList();</pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"> String[] videoColumns = {<span style="font-size: 9pt;">MediaStore.Video.Media.</span><span style="color: #660e7a; font-size: 9pt; font-style: italic; font-weight: bold;">DATA</span><span style="font-size: 9pt;">,</span><span style="font-size: 9pt;">MediaStore.Video.Media.</span><span style="color: #660e7a; font-size: 9pt; font-style: italic; font-weight: bold;">DURATION</span><span style="font-size: 9pt;">,</span></pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"> MediaStore.Video.Media.<span style="color: #660e7a; font-style: italic; font-weight: bold;">SIZE</span>,<span style="font-size: 9pt;">MediaStore.Video.Media.</span><span style="color: #660e7a; font-size: 9pt; font-style: italic; font-weight: bold;">DISPLAY_NAME</span><span style="font-size: 9pt;">};</span></pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"> <span style="color: #660e7a; font-weight: bold;">mVideoCursor </span>= getApplicationContext().getContentResolver().query</pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"> (MediaStore.Video.Media.<span style="color: #660e7a; font-style: italic; font-weight: bold;">EXTERNAL_CONTENT_URI</span>, videoColumns, <span style="color: navy; font-weight: bold;">null</span>, <span style="color: navy; font-weight: bold;">null</span>, <span style="color: navy; font-weight: bold;">null</span>);
<span style="color: #660e7a; font-weight: bold;">mVideoCursor</span>.moveToFirst();
<span style="color: navy; font-weight: bold;">for </span>(<span style="color: navy; font-weight: bold;">int </span>i = <span style="color: blue;">0</span>; i < <span style="color: #660e7a; font-weight: bold;">mVideoCursor</span>.getCount(); i++) {
<span style="color: #660e7a; font-weight: bold;">listOfVideo</span>.add(<span style="color: navy; font-weight: bold;">new </span>HashMap<String, String>() {
{
put(<span style="color: green; font-weight: bold;">"data"</span>, String.<span style="font-style: italic;">valueOf</span>(<span style="color: #660e7a; font-weight: bold;">mVideoCursor</span>.getString<span style="font-size: 9pt;">( </span></pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"><span style="color: #660e7a; font-size: 9pt; font-weight: bold;"> mVideoCursor</span><span style="font-size: 9pt;">.getColumnIndex(MediaStore.Video.Media.</span><span style="color: #660e7a; font-size: 9pt; font-style: italic; font-weight: bold;">DATA</span><span style="font-size: 9pt;">))));</span></pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"> put(<span style="color: green; font-weight: bold;">"duration"</span>, String.<span style="font-style: italic;">valueOf</span>(<span style="color: #660e7a; font-weight: bold;">mVideoCursor</span>.getString(</pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"><span style="color: #660e7a; font-weight: bold;"> mVideoCursor</span>.getColumnIndex(MediaStore.Video.Media.<span style="color: #660e7a; font-style: italic; font-weight: bold;">DURATION</span>))));
put(<span style="color: green; font-weight: bold;">"displayName"</span>, String.<span style="font-style: italic;">valueOf</span>(<span style="color: #660e7a; font-weight: bold;">mVideoCursor</span>.getString(</pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"><span style="color: #660e7a; font-weight: bold;"> mVideoCursor</span>.getColumnIndex(MediaStore.Video.Media.<span style="color: #660e7a; font-style: italic; font-weight: bold;">DISPLAY_NAME</span>))));
put(<span style="color: green; font-weight: bold;">"size"</span>, String.<span style="font-style: italic;">valueOf</span>(<span style="color: #660e7a; font-weight: bold;">mVideoCursor</span>.getString(</pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"><span style="color: #660e7a; font-weight: bold;"> mVideoCursor</span>.getColumnIndex(MediaStore.Video.Media.<span style="color: #660e7a; font-style: italic; font-weight: bold;">SIZE</span>))));
<span style="color: #660e7a; font-weight: bold;">mVideoCursor</span>.moveToNext();
}
});
}
String path = <span style="color: #660e7a; font-weight: bold;">listOfVideo</span>.get(<span style="color: blue;">0</span>).get(<span style="color: green; font-weight: bold;">"data"</span>);
File inFile = <span style="color: navy; font-weight: bold;">new </span>File(<span style="color: #660e7a; font-weight: bold;">listOfVideo</span>.get(<span style="color: blue;">0</span>).get(<span style="color: green; font-weight: bold;">"data"</span>));
File outFile = <span style="color: navy; font-weight: bold;">new </span>File(path.substring(<span style="color: blue;">0</span>, path.lastIndexOf(<span style="color: green; font-weight: bold;">"/"</span>))+<span style="color: green; font-weight: bold;">"/enc_video.swf"</span>);
File outFile_dec = <span style="color: navy; font-weight: bold;">new </span>File(path.substring(<span style="color: blue;">0</span>, path.lastIndexOf(<span style="color: green; font-weight: bold;">"/"</span>))+<span style="color: green; font-weight: bold;">"/dec_video.mp4"</span>);
<span style="color: navy; font-weight: bold;">try </span>{
SecretKey key = KeyGenerator.<span style="font-style: italic;">getInstance</span>(<span style="color: #660e7a; font-style: italic; font-weight: bold;">ALGO_SECRET_KEY_GENERATOR</span>).generateKey();
<span style="color: navy; font-weight: bold;">byte</span>[] keyData = key.getEncoded();
SecretKey key2 = <span style="color: navy; font-weight: bold;">new </span>SecretKeySpec(keyData, <span style="color: blue;">0</span>, keyData.<span style="color: #660e7a; font-weight: bold;">length</span>, <span style="color: #660e7a; font-style: italic; font-weight: bold;">ALGO_SECRET_KEY_GENERATOR</span>); <i> </i><span style="color: grey; font-style: italic;">
</span><span style="color: grey; font-style: italic;"> </span><span style="color: navy; font-weight: bold;">byte</span>[] iv = <span style="color: navy; font-weight: bold;">new byte</span>[<span style="color: #660e7a; font-style: italic; font-weight: bold;">IV_LENGTH</span>];
SecureRandom.<span style="font-style: italic;">getInstance</span>(<span style="color: #660e7a; font-style: italic; font-weight: bold;">ALGO_RANDOM_NUM_GENERATOR</span>).nextBytes(iv);</pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"> <span style="color: grey; font-style: italic;"> </span>AlgorithmParameterSpec paramSpec = <span style="color: navy; font-weight: bold;">new </span>IvParameterSpec(iv);
Encrypter.<span style="font-style: italic;">encrypt</span>(key, paramSpec, </pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"><span style="color: navy; font-weight: bold;"> new </span>FileInputStream(inFile), <span style="color: navy; font-weight: bold;">new </span>FileOutputStream(outFile));
Encrypter.<span style="font-style: italic;">decrypt</span>(key2, paramSpec,
<span style="color: navy; font-weight: bold;"> new </span>FileInputStream(outFile), <span style="color: navy; font-weight: bold;">new </span>FileOutputStream(outFile_dec));
} <span style="color: navy; font-weight: bold;">catch </span>(Exception e) {
e.printStackTrace();
}
}
}
</pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;">Thanks!!!!!!!</pre><pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;">You can refer to my repository on Github for more source code -</pre><pre style="background-color: white; font-family: "DejaVu Sans Mono"; font-size: 9pt;"> https://github.com/akash-bisariya/Video-Encryption-Decryption</pre>
<br />
<br />
<br />
<br />
<br /></div>
Akash Bisariyahttp://www.blogger.com/profile/09587286998959079329noreply@blogger.com9tag:blogger.com,1999:blog-5666881508464613799.post-46664646826664988212016-05-13T04:54:00.001-07:002017-01-31T02:40:23.091-08:00Create Custom Twitter Follow Button in Android Application<div dir="ltr" style="text-align: left;" trbidi="on">
Hello friends ,<br />
Today i am going to post my second tutorial.<br />
<h2 style="text-align: left;">
In this tutorial I will explain how to create the custom "Twitter Follow" button in our android application.</h2>
With this button we can the follow the particular person on twitter.<br />
For this you have to first integrate Fabric API provided by Twitter. Here is a link to integrate this api - <u><i>https://get.fabric.io/</i></u><br />
There are several simple to steps integrate this api and you can use Twitter Login feature in just few steps by using it.<br />
Now we see how to create Follow Functionality in our application.<br />
First you have to create a simple "Follow Me"button in layout of the activity on which click event we have to implement Follow functionality.<br />
(Note - I am assuming user is already logged in twitter using Fabric API).<br />
<br />
I am creating a class "TwitterFollowMe" and a interface to hit twitter api of following a person as -<br />
<br />
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: navy; font-weight: bold;">public class </span>TwitterFollowMe <span style="color: navy; font-weight: bold;">extends </span>TwitterApiClient {
<span style="color: navy; font-weight: bold;">public </span>TwitterFollowMe(TwitterSession session) {
<span style="color: navy; font-weight: bold;">super</span>(session);
}
<span style="color: navy; font-weight: bold;">public </span>FollowService getFollowService() {
<span style="color: navy; font-weight: bold;">return </span>getService(FollowService.<span style="color: navy; font-weight: bold;">class</span>);
}</pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"> <span style="color: grey; font-style: italic;">/*interface used for Api call for Following*/</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: grey; font-style: italic;"> </span><span style="color: navy; font-weight: bold;">public interface </span>FollowService {
<span style="color: olive;">@POST</span>(<span style="color: green; font-weight: bold;">"/1.1/friendships/create.json"</span>)
<span style="color: navy; font-weight: bold;">public void </span>create(<span style="color: olive;">@Query</span>(<span style="color: green; font-weight: bold;">"screen_name"</span>) String screen_name,</pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"> <span style="color: olive;">@Query</span>(<span style="color: green; font-weight: bold;">"user_id"</span>) String user_id, <span style="color: olive;">@Query</span>(<span style="color: green; font-weight: bold;">"friends"</span>) <span style="color: navy; font-weight: bold;">boolean </span>follow, </pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"> Callback<User> cb);
}
}</pre>
<br />
Now on "Follow Me" button click event you have to implement that interface as -<br />
<br />
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: #660e7a; font-weight: bold;">btnFollowMe</span>.setOnClickListener(<span style="color: navy; font-weight: bold;">new </span>View.OnClickListener() {
<span style="color: olive;">@Override</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: olive;"> </span><span style="color: navy; font-weight: bold;">public void </span>onClick(View view) {
<span style="color: #660e7a; font-weight: bold;">apiClient </span>= <span style="color: navy; font-weight: bold;">new </span>TwitterFollowMe(<span style="color: #660e7a; font-weight: bold;">session</span>);
<span style="color: grey; font-style: italic;">//twitter user name</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: grey; font-style: italic;"> </span><span style="color: #660e7a; font-weight: bold;">apiClient</span>.getFollowService().create(<span style="color: green; font-weight: bold;">"Twitter_Screen_Name(ex-Moto_IND)"</span>, </pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: navy; font-weight: bold;"> null</span>, <span style="color: navy; font-weight: bold;">true</span>, <span style="color: navy; font-weight: bold;">new </span>Callback<User>() {
<span style="color: olive;">@Override</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: olive;"> </span><span style="color: navy; font-weight: bold;">public void </span>success(Result<User> result) {
Toast.<span style="font-style: italic;">makeText</span>(MainActivity.<span style="color: navy; font-weight: bold;">this</span>, <span style="color: green; font-weight: bold;">"Thanks for following!"</span>, </pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"> Toast.<span style="color: #660e7a; font-style: italic; font-weight: bold;">LENGTH_SHORT</span>).show();
<span style="color: #660e7a; font-weight: bold;">btnFollowMe</span>.setVisibility(View.<span style="color: #660e7a; font-style: italic; font-weight: bold;">GONE</span>);
}
<span style="color: olive;">@Override</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: olive;"> </span><span style="color: navy; font-weight: bold;">public void </span>failure(TwitterException e) {
Toast.<span style="font-style: italic;">makeText</span>(MainActivity.<span style="color: navy; font-weight: bold;">this</span>, <span style="color: green; font-weight: bold;">"Error following"</span>, </pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"> Toast.<span style="color: #660e7a; font-style: italic; font-weight: bold;">LENGTH_SHORT</span>).show();
}
});
}
});</pre>
<br />
In this code we call "getFollowService().create" method .<br />
First parameter is the "Twitter Screen Name" of the user and the second parameter is "Twitter User Id" and the third parameter is boolean to indicate Follow action and the last is the Callback.<br />
You can provide any one parameter from the "User Id" and "Screen Name".<br />
In "success" callback you can get the call after successfully following that "Twitter User".<br />
<br />
And that's all to implement the Twitter Follow button!!!!.<br />
<u><i><br /></i></u>
<u><i>Thanks</i></u></div>
Akash Bisariyahttp://www.blogger.com/profile/09587286998959079329noreply@blogger.com0tag:blogger.com,1999:blog-5666881508464613799.post-73282717916334223982016-04-13T02:00:00.002-07:002017-01-31T02:43:03.374-08:00Swipe and Dismiss Behavior in Views of Android <div dir="ltr" style="text-align: left;" trbidi="on">
Hi Friends.<br />
I am back!!(May be some late).<br />
I will post my first tutorial of android.<br />
Here I will discuss about how to give swipe and dismiss functionality to our views or layouts.<br />
This feature introduces with the "Design support Library" that includes a public class called "SwipeDismissBehavior" that can be easily used with Coordinator layout to implement this functionality.<br />
Following is layout of my simple page that has a parent coordinator layout and linear layout as a child.Linear layout contains a image view and text view.<br />
<br />
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="font-style: italic;"><?</span><span style="color: blue; font-weight: bold;">xml version=</span><span style="color: green; font-weight: bold;">"1.0" </span><span style="color: blue; font-weight: bold;">encoding=</span><span style="color: green; font-weight: bold;">"utf-8"</span><span style="font-style: italic;">?></span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><<span style="color: navy; font-weight: bold;">android.support.design.widget.CoordinatorLayout</span><span style="color: navy; font-weight: bold;"> </span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: blue; font-weight: bold;"> xmlns:</span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">=</span><span style="color: green; font-weight: bold;">"http://schemas.android.com/apk/res/android"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: blue; font-weight: bold;">xmlns:</span><span style="color: #660e7a; font-weight: bold;">tools</span><span style="color: blue; font-weight: bold;">=</span><span style="color: green; font-weight: bold;">"http://schemas.android.com/tools"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:layout_width=</span><span style="color: green; font-weight: bold;">"match_parent"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:layout_height=</span><span style="color: green; font-weight: bold;">"match_parent"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:paddingLeft=</span><span style="color: green; font-weight: bold;">"@dimen/activity_horizontal_margin"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:paddingRight=</span><span style="color: green; font-weight: bold;">"@dimen/activity_horizontal_margin"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:paddingTop=</span><span style="color: green; font-weight: bold;">"@dimen/activity_vertical_margin"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:</span><span style="background-color: #e4e4ff; color: blue; font-weight: bold;">paddingBottom</span><span style="color: blue; font-weight: bold;">=</span><span style="color: green; font-weight: bold;">"@dimen/activity_vertical_margin"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:layout_gravity=</span><span style="color: green; font-weight: bold;">"bottom"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">tools</span><span style="color: blue; font-weight: bold;">:context=</span><span style="color: green; font-weight: bold;">"com.affle.coordinatorlayoutexa.MainActivity"</span>></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"> <<span style="color: navy; font-weight: bold;">LinearLayout</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: navy; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:layout_width=</span><span style="color: green; font-weight: bold;">"match_parent"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:layout_height=</span><span style="color: green; font-weight: bold;">"150dp"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:orientation=</span><span style="color: green; font-weight: bold;">"horizontal"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:weightSum=</span><span style="color: green; font-weight: bold;">"2"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:id=</span><span style="color: green; font-weight: bold;">"@+id/llContainer"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:gravity=</span><span style="color: green; font-weight: bold;">"bottom"</span>>
<<span style="color: navy; font-weight: bold;">ImageView</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: navy; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:layout_width=</span><span style="color: green; font-weight: bold;">"0dp"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:layout_height=</span><span style="color: green; font-weight: bold;">"150dp"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:layout_weight=</span><span style="color: green; font-weight: bold;">"1"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:layout_gravity=</span><span style="color: green; font-weight: bold;">"center_vertical"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:src=</span><span style="color: green; font-weight: bold;">"@drawable/imgpsh_fullsize"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:id=</span><span style="color: green; font-weight: bold;">"@+id/ivIamge"</span>/>
<<span style="color: navy; font-weight: bold;">TextView</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: navy; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:layout_width=</span><span style="color: green; font-weight: bold;">"0dp"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:layout_height=</span><span style="color: green; font-weight: bold;">"wrap_content"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:layout_weight=</span><span style="color: green; font-weight: bold;">"1"</span></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"><span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:text=</span><span style="color: green; font-weight: bold;">"This view is for swipped and dismiss"</span>/>
</<span style="color: navy; font-weight: bold;">LinearLayout</span>></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"></<span style="color: navy; font-weight: bold;">android.support.design.widget.CoordinatorLayout</span>></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;">Following is my main activity that uses the "SwipeDismissBehaviour" class.</pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;">First we have to create instance of this class as - </pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: 'DejaVu Sans Mono'; font-size: 9pt;"></pre>
<pre style="background-color: white;"><pre style="font-family: 'DejaVu Sans Mono'; font-size: 9pt;">SwipeDismissBehavior<LinearLayout> swipeDismissBehavior = <span style="color: navy; font-weight: bold;">new </span>SwipeDismissBehavior<>();</pre>
<pre><span style="font-family: "dejavu sans mono";"><span style="font-size: 9pt;">Then we set the direction of </span><span style="font-size: 12px;">swiping</span><span style="font-size: 9pt;"> as - </span></span></pre>
<pre style="font-family: 'DejaVu Sans Mono'; font-size: 9pt;">swipeDismissBehavior.setSwipeDirection(SwipeDismissBehavior.<span style="color: #660e7a; font-style: italic; font-weight: bold;">SWIPE_DIRECTION_START_TO_END</span>);</pre>
<pre style="font-family: 'DejaVu Sans Mono'; font-size: 9pt;">Now we set the listener of swipe event that includes two override methods - </pre>
<pre style="font-family: 'DejaVu Sans Mono'; font-size: 9pt;">1. OnDismiss()</pre>
<pre style="font-family: 'DejaVu Sans Mono'; font-size: 9pt;">2. OnDragStateChanged</pre>
<pre style="font-family: 'DejaVu Sans Mono'; font-size: 9pt;">swipeDismissBehavior.setListener(<span style="color: navy; font-weight: bold;">new </span>SwipeDismissBehavior.OnDismissListener() {
<span style="color: olive;">@Override</span><span style="color: olive;"> </span><span style="color: navy; font-weight: bold;">public void </span>onDismiss(View view) {
Toast.<span style="font-style: italic;">makeText</span>(MainActivity.<span style="color: navy; font-weight: bold;">this</span>,
<span style="color: green; font-weight: bold;">"View swiped "</span>, Toast.<span style="color: #660e7a; font-style: italic; font-weight: bold;">LENGTH_SHORT</span>).show();}
<span style="color: olive;">@Override</span><span style="color: olive;"> </span><span style="color: navy; font-weight: bold;">public void </span>onDragStateChanged(<span style="color: navy; font-weight: bold;">int </span>state) {}
});</pre>
<pre style="font-family: 'DejaVu Sans Mono'; font-size: 9pt;">And at last we find the LayoutParams of the parent layout and set its behavior as -</pre>
<pre style="font-family: 'DejaVu Sans Mono'; font-size: 9pt;">CoordinatorLayout.LayoutParams params=(CoordinatorLayout.LayoutParams)llContainer.getLayoutParams();
params.setBehavior(swipeDismissBehavior);</pre>
<pre style="font-family: 'DejaVu Sans Mono'; font-size: 9pt;"></pre>
<pre style="font-family: 'DejaVu Sans Mono'; font-size: 9pt;">And that's all we have to do!!!</pre>
<pre style="font-family: 'DejaVu Sans Mono'; font-size: 9pt;">Enjoy the Swipe and Dismiss feature.</pre>
<pre style="font-family: 'DejaVu Sans Mono'; font-size: 9pt;"></pre>
<pre style="font-family: 'DejaVu Sans Mono'; font-size: 9pt;"></pre>
<pre style="font-family: 'DejaVu Sans Mono'; font-size: 9pt;"></pre>
<pre style="font-family: 'DejaVu Sans Mono'; font-size: 9pt;"></pre>
</pre>
<br />
<br /></div>
Akash Bisariyahttp://www.blogger.com/profile/09587286998959079329noreply@blogger.com0tag:blogger.com,1999:blog-5666881508464613799.post-74066270095459219052016-02-23T04:15:00.002-08:002016-02-23T04:15:34.639-08:00<div dir="ltr" style="text-align: left;" trbidi="on">
Hi Friends,<br />
Have a nice day !!<br />
My name is Akash and I am an Android Developer. I am not a experienced developer but i must say myself a learning developer.<br />
Now on wards i will share some of my coding experiences with you , as this platform is an ideal choice for sharing knowledge and experience.<br />
You must also share your experiences as we all know that knowledge increases with sharing!<br />
<br /></div>
Akash Bisariyahttp://www.blogger.com/profile/09587286998959079329noreply@blogger.com0