Sunday, December 29, 2019

Flutter - Propagate information with InheritedWidget.

flutter inherited widget example
As we know, a Flutter application manages a tree of widgets that sometimes become a very deep tree of widgets. In this big tree, if you want to pass parameters from root to lower widget. You can do it with the help of the constructor that is perfectly fine for accessing data one level down, maybe even two. But if you're widget tree level is deep and you suddenly need the data from an object in your code from root to lower widget. It'll become complex and lead to a lot of boilerplate code for passing context around, as shown below: 
class RootWidget extends StatelessWidget {                                            Level - 1
  final int postId;
  final int scopeId;
  RootWidget(this.postId, this.scopeId);
  Widget build(BuildContext context) {
    ...To DO
    return PostItemWidget(postId, scopeId);
  }
}

class PostItemWidget extends StatelessWidget {                                     Level - 2
  final int postId;
  final int scopeId;
  PostItem(this.postId, this.scopeId);
  Widget build(BuildContext context) {
     ...To DO
    return PostMenuWidget(postId, scopeId);
  }
}

class PostMenuWidget extends StatelessWidget {                                   Level - 3
  final int postId;
  final int scopeId;
  PostMenuWidget(this.postId, this.scopeId);
  Widget build(BuildContext context) {
    //  repeat
    ...                                                                                                          Levels - n



In order to provide a solution for this situation, Flutter provides a special widget called InheritedWidget that defines a context at the root of a sub-tree. It can efficiently deliver this context to every widget in that sub-tree. This widget is specially designed to hold data and to provide it throughout the widget tree, irrespective of its depth. InheritedWidget is the base class for widgets that efficiently propagate information down the widgets tree. All widgets part of that sub-tree will have to ability to interact with the data which is exposed by that InheritedWidget.
Share:

Sunday, December 15, 2019

Flutter - Lifecycle of Widgets.

flutter widget lifecycle diagram
Flutter is a mobile UI framework that helps us to create modern mobile apps for iOS and Android using a single(almost) codebase. A Flutter application is just a combination of Stateful and  Stateless Widgets. In this post, we going to explain basic behavior of the Flutter widget and it's lifecycle.
Share:

Sunday, November 17, 2019

Flutter vs React Native - What’s best for cross plateform mobile Application.

Today, all the companies creating Android and iOS platforms application to reach maximum end users. To create a native Android and iOS app, they have to maintain two source code that creates a gap between the applications as they are made by different teams. To resolve this, they have to move on the cross-platform apps that have a lot of pros and cons:


                                       
Share:

Sunday, October 6, 2019

Flutter - Don’t use ‘/’ to prefix with navigation routes

A mobile apps usually have multiple screens or pages. The end-user is presented one screen at a time. The Flutter framework provides us page navigation and routes to manage multiple screens.

We have published a post to manage multiple screens in Flutter application.  Flutter- Screen push and pop with Navigator. You can learn complete guidelines to manage routes, push and pop methods of  Flutter Framework.

flutter route without slashes The Flutter frameworks can help you to understand page navigation and manage conditional logic to determine which page to show first for things such as login and onboarding. If you’re using the MaterialApp widget, then you typically set the initialRoute property to specify where you want the app to start as shown below:


Share:

Sunday, September 29, 2019

Flutter - Drop down menu list with example

The dropdown is a toggleable menu that shows all the available option when we click on it to choose one option from predefined options. 

flutter dropdown button and list demo
In Flutter, the dropdownbutton is a widget that we can use to select one value from a set of values. In the default state, a dropdownbutton shows its currently selected value. After clicking on the dropdownbutton it displays a drop-down menu with all other available values, from which the user can select a new one.
Share:

Wednesday, September 25, 2019

Flutter - Pros and Cons of using Flutter for Mobile App Development

Are you thinking to create a mobile app?. Are you confused when it comes to selecting the right framework for your app? We are aware of the huge impact of mobile apps surrounding us but still, the road to mobile app development is not as easy as it seems. It is not only about developing the mobile app but also satisfies the customers.

pros and cons of flutter

Share:

Sunday, August 25, 2019

Flutter - Playing local, network and youtube videos with video player plugin.

If you're creating an application that supports videos feature then you have to use a video player. The Flutter team have created a Video Player widget to display a video in Flutter application.

flutter video player example
The Video Player widget can play multiple types of videos that may be stored in the mobile, as an asset, and from the internet. This plugin allows flutter to interface with the platform's native video players. In iOS, the video player widget uses AVPlayer to handle playback and it does not work on iOS simulators. So, you have to test videos on real iOS devices. In Android, the video player widget uses ExoPlayer to play a video. 

Share:

Sunday, August 4, 2019

Flutter - Draw custom shaps with clip path.

As we know, Flutter is a Mobile UI framework by Google which allows developers to create beautiful apps for both iOS and Android with a single codebase. 

flutter clip path exampleApart from inbuilt widgets that is Flutter framework provides us, we can draw a custom shape that is called Clipping. In a Flutter application, we use clipping to create awesome looking, custom user interfaces with special effects. A widget that clips its child using a path and calling a callback on a delegate whenever the widget is to be painted. The callback returns a path and the widget prevents the child from painting outside the path.


Share:

Saturday, July 27, 2019

Android - Configuring SonarQube with Android Studio project.

CI/CD (Continuous Integration/Continuous Deployment) is the backbone of the organizations to build a good quality products. The CI/CD bridges the gap between development and operations teams by automating build, test, and deployment of applications. It helps the development team to find code smells in the projects.

sonar qube installation in Android Studio project
Code smells are bugs in your code that produce the performance issue of the Application. We can find this smell with the help of the various tool. The tool can help you define custom rules, in addition to the common code smell patterns, externalize these rules and have the flexibility to apply them to the code at the project level, department level and at the enterprise level.  

The SonarQube is an open-source service that can scan code in 25+ languages and generates reports of smells, vulnerabilities, and bugs. It provides a beautiful dashboard scanning data where we can analyze our code quality. SonarQube is a big step toward automating development operations as it enables continuous code inspection that will improve code quality and ensures clean code.  It can easily be integrated right into the CI/CD process, which will enable continuous inspection of code for bugs, vulnerabilities, and smells, and can be extended. SonarQube can also be extended by using plugins. For example, we can use the CodeAnalyzer plugin to measure cyclomatic complexity.
Share:

Sunday, July 21, 2019

Flutter - Web view widget and progress bar.

WebView in a mobile application allows us to integrate a web page as a part of the app. It comes with all the features for managing history, cookies, HTML5 support and lot more. 

flutter web view url loading example with progress bar
Using webview, you can build very cool apps like integrating HTML5 games, show text, audio, video, animation and more in the mobile app. The web page can be loaded from the same application by using a url address. It is the responsibility of a web browser to interpret text and commands that contained in the web page.
Share:

Sunday, July 14, 2019

Flutter - Text widget with read more or expand feature.

In the mobile applications, sometimes we have to create an item that shows only two or three lines of the complete paragraph. To create such kind of view, we have a to add a button that displays complete content. When the user clicks on that button.

flutter read more textview widgetThe read more or expandable feature in a Text and other widgets will help you to show large sentences or paragraphs.  It shows complete paragraphs when a user clicks on read more button. We can display these feature at the end of sentences, as you can see below. The Flutter framework provides a Text widget to display content. But it's not providing any expandable feature to display text.
Share:

Thursday, July 4, 2019

Flutter - Facebook login and authentication example

Today, almost every application provides login with Facebook because it having the biggest social media network in the world. It creates a wide range of users base for your application.
 
Flutter create facebook label.
The Facebook SDK provides a convenient and secure way for users to log in to an app without go through a sign-up process. Facebook SDK takes care of user’s privacy as well, when people log into your app they can grant permissions to your app. After that, you can retrieve information and perform some actions for your application.

Share:

Saturday, June 22, 2019

Flutter - Draw SVG and Vector drawables.

The icons or graphics make an application more interactive because users get a rough idea of features of application by just seeing the icon and not reading the text corresponding to the icon. You should use more graphics if your user base is not so literate because the pictorial representations convey a better message to the users.
flutter svg example
So, if you are creating a mobile application with the help of icons. Then you have to support multiple resolutions icons that are sometimes a nightmare to developers. We have to create different mobile sizes icons in mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, x, 2x, 3x and so on. This will increase the size of your app. 

Share:

Saturday, June 8, 2019

Flutter — IDE Shortcuts for Faster and Efficient Development.

The IDE shortcuts help us a lot while developing, especially when we have a lot of code to go through and we have to find the opening and closing brackets, insert and remove the widget.
flutter shortcuts key widgets
If you’re new to Flutter development then you definitely facing problem to understand the nested structures and you spending the whole day for match the opening brackets to their closing ones. To increase development speed, we have to find out all important shortcuts of Flutter framework.

Share:

Sunday, June 2, 2019

Flutter - Nexmo verify otp plugin.

Nowadays, all applications usually use a SMS text for authentication purpose, like OTP (One-Time-Passwords). Where a message(OTP) is sent by the service-provider. With the help of OTP, we can verify mobile numbers while e-commerce transactions, signing up and logging in the application. 
flutter-nexmo-verify-api-otp
To make this process effortless we can auto read the OTP as soon as it reaches the user's inbox. This flow helps the user to save a lot of apps switching from application to messenger app and then entering the authentication text to the app again. It is more widespread and safe because it is difficult to hack.
Share:

Saturday, June 1, 2019

Flutter - Screen navigation with custom transition animations.

The navigation is an important part of any mobile application. To use all the features of an application, we have to navigate between different screens such as, from the list to a detailed screen, from a shopping cart to a checkout screen and many other cases.
custom screen transition flutter If we talk about the native mobile application. The iOS navigation experience is often built-around  UINavigationController, which uses a stack-based approach for navigation between screens. On the Android side, the Activity manages stack for navigation between different screens. Just like the native SDKs, the Flutter frameworks provide some transition widget to achieve screen transitions. 


Share:

Monday, May 27, 2019

Flutter - Pragmatic state management using provider.

As we know, we have to make a hierarchy of widgets to design a screen in Flutter with help of Stateless and Stateful widgets. As the names suggest, the Stateless widget has no internal state which means once built and can never be modified. On the other side, the Stateful widgets are dynamic and have a state, which we can be modified easily throughout their life-cycle without re-initiation.
flutter-pragmatic-state-management-provider-flowThe state of widget is the information that can be read synchronously when the widget is built and change during the lifetime of the widget.  In order to change widget, you need to update the state object which can be update by using setState() function of Stateful widgets.

Share:

Sunday, May 26, 2019

Flutter - how to architect projects with BLOC pattern.

Today, whenever we start a new project. We have to focus on building a solid structure or architecture of the project. An application leads readable, maintainable and testable if you have made a clean and good architecture of an application.
Flutter framework provides us a lot of flexibility to organize and architect applications code-base. So, if you not following the proper and good architecture of the project. It may be lead to applications with large classes, inconsistent naming schemes, scary architectures.
Share:

Saturday, April 20, 2019

Flutter - Important properties of Textfield.

Whenever we start designing a login and sign-up form of any application. We always need an input field to take input from end users that are a primary way for them.

flutter textfield  properties
In Flutter, we have a TextField widget to take input from the end users. A text field lets the user enter text, either with a hardware keyboard or with an on-screen keyboard. It is defined as a stateful widget in the framework. It's having many important properties that can be set to customize the behavior.

Share:

Friday, April 5, 2019

Flutter - Google map widget plugin example.

When I was started working with Flutter framework. I found lots of third-party plugins to create application screen. The google map plugin was one of them that is still under construction. By using this plugin, we have written the following post.

Flutter - Google map plugin.
Flutter - How can draw route on google map between markers.

If you have read and worked on them. You will see, it has some limitations to work on UI design of google map.

Flutter team has rolled out their own google map widget. This is a widget that is very helpful to design inline google map screen in the application. We can perform all the actions that we do with a normal widget. This plugin is also under construction and they breaking the changes in this widget.

Share:

Saturday, March 30, 2019

Flutter - Custom red error widget screen.

When you started work on Flutter application screen design. You definitely face a red screen that shows UI error. It is most irritating and makes us unhappy when you are a beginner.

In Flutter, it’s important to understand how your user experiences these bugs and where those bugs occur. How we can find the bugs with the highest impact and work to fix them. Sometimes, it's necessary to show a meaningful message to make it more sensible for the tester and developer. Flutter framework provides us customization feature to handle these error widget. According to the docs, Flutter shows red screen error whenever a widget fails to build. There is a performRebuild() method inside of StatefulWidget.dart class that invoke to build the widget.
performRebuild
@override void performRebuild() { //..// try { built = build(); debugWidgetBuilderValue(widget, built); } catch (e, stack) { built = ErrorWidget.builder(_debugReportException('building $this', e, stack)); } //..// }
As we can see, the red screen error is nothing but a widget named ErrorWidget provided by the framework. The ErrorWidget will be invoked only when a widget building fails. When widget building fails, Error Widget replaces with your widget. That’s why it's visible only in the area occupied by the widget that has failed to build.

Share:

Sunday, March 24, 2019

Flutter - Localization or Multi Language support with Examples.

If you have created a mobile application and you want to increase users of the mobile application. So, we need to support multiple languages in our application. In mobile, with the help of localization, you can change the language of application labels and we can render the content of the app into other languages. We can customize the app for each target market and user.

We can display dates, times, and numbers in particular user readable formats. Android and iOS is the most popular mobile operating system and it runs on millions of devices in many regions. So, if we implement an app which is localized for all the regions, then it will reach most of the users. 

Share:

Friday, March 15, 2019

Android - SMS & Call Log permissions are removed.

Sms and call logs are one of the most sensitive information in the smartphone. They hold lots of information like your phone number, conversation history, and the personal information of other people in your phone. 

Google is day by day updating their policy to protect them. Google's Play Store policy has changed for SMS and call. Google has denied the request permission for SMS and call log. Google removing all the apps that require SMS and Call Logs permissions from the Play Store.  

Google published new guidelines regarding SMS and Call Permissions. According to their new policies, only an app that has been selected as a user’s default app for making calls or text messages will be able to access call logs and SMS, respectively. To read more about their announcement, please see the following link: Security and performance 

Android app developers who have such apps on the Play Store have been notified through e-mail and their apps will be removed unless they have submitted a permissions declaration form. Google has stated that only those apps that require access to call logs and SMS for their functionality will stay put on the Play Store, while all others requiring these permissions will be removed.
Now you should be removing it from the AndroidManifest file and should update the app in play store.


Share:

Sunday, February 17, 2019

Android - GPS Location and Address with new google map API in kotlin.

Today, mobile phones are more powerful that offers GPS Location to users in mobile applications. To use GPS location and google map, the Android SDK offers the location API that is updated by the Android SDK development team day by day for optimizing mobile battery life and other aspects. Android location APIs make a location-aware application, without needing to focus on the details of the location technology.


GPS location tracker works with the help of Google Play services, which facilitates adding location awareness to an application with automated location tracking, geofencing, and activity recognition that returns a location object. The location object represents a geographic location which consists of latitude, longitude, timestamp, and other information.

Share:

Saturday, February 9, 2019

Flutter - No connected devices.

flutter no device connected
To develop a mobile application, we always need a testing real device or Android Emulator device to test developed features. In this post, we going to share some tips to connect a device with a development IDE. Maybe this is very useful for those people facing device connectivity problem. So here, we have some tips that you can use to resolve it.

Share:

Sunday, February 3, 2019

Flutter - Equivalent of RelativeLayout in Flutter

If you have worked with native Android application development. Then you definitely know about the Relative Layout. The Relative Layout is a very flexible layout that used for custom layout designing. It gives us the flexibility to position a view based on the relative or sibling component’s position.
flutter relative layout alternative widget
In Flutter, we can design a screen with the help of StatelessWidget and StateFulWidget. So, if you are thinking such kind of layout in Flutter Application. Then you can use Column, Row and Stack widgets to design your application screen in Flutter. Flutter layouts are usually built using a tree of these widgets. These widgets take constructor arguments that specify rules for how the children are laid out relative to the parent, and you can also influence the layout of individual children by wrapping them in Expanded, Flexible, Positioned, Align, or Center widgets that are explained here

Share:

Monday, January 28, 2019

Android - Introduction and Example of Jetpack Navigation Architecture.

Today, All mobile application contains more than one screens to provide all necessary feature to the end users. Like user can move from splash screen to home screen.

jetpack-navigation-architecture-graph
From this home screen, the user can perform other tasks that show a result in other screens. These screens will usually take the form of activity and fragment within the app. An end user can navigate on all other screens with the help of screen gestures, button clicks, and menu selections. All of the work involved in navigation between destinations and stack that is handled by a navigation controller. Without navigation, we have to write a very big manual code to move from one screen to another screen that creates complex navigation paths.
Share:

Saturday, January 19, 2019

Flutter - GET and POST http requests

To get dynamic data in a mobile application. We need to connect with a server to get and post some data. To achieve it, we always use HTTP to perform curl requests and create a connection between applications and server at a certain period to send or receive the data request from an application to the server.

Flutter providing us http to connect a mobile application with a server to perform GET, POST and other requests. POST and GET are two most commonly used HTTP methods for request and response between the client and the server. GET method basically requests data from a specified resource, whereas Post method submits data to be processed to a specified resource.

If you are looking some advance http client to handle interceptors, logs, cache etc. Then you should try Dio http client that we have explained here: Flutter - Dio client to create Http Request

Share:

Get it on Google Play

React Native - Start Development with Typescript

React Native is a popular framework for building mobile apps for both Android and iOS. It allows developers to write JavaScript code that ca...