CodeChai
A place for programmers and writers turning coffee/tea into code, one line at a time.
Image for post
Image for post
CodeChai Logo

For the past year, me and my partner Danish Amjad have been running FlutterPub publication on the side with our lives. Although this year 2020 have been very hard and challenging due to Covid-19, but we are happy with the progress FlutterPub have made.

With over 13,000 followers and more than 12,000 views a day, this publication has got hundreds of awesome articles on Flutter by amazing writers around the world. But as time passed away, we realized that when there are more active publications about Flutter such as Flutter Community etc. then it doesn’t make sense to have other publication as well. This not only makes confusion for readers but also for writers, who have to decide which publication they want to put their articles in. This may increase competition, but we believe sharing knowledge should not be competitive. …


Implement search in Flutter Web

Search in Flutter Web

How to implement search in Flutter Web? Hmm…

All in one Flutter resource: https://flatteredwithflutter.com/how-to-implement-search-in-flutter-web/

Flutter Web and Search

Begin…

View the demo here

Website: https://web.flatteredwithflutter.com/#/

We will cover briefly about

  1. Implement Search in Flutter Web
  2. Saving the user searches (Bonus)
  3. Displaying user search history (Bonus)
Image for post
Image for post
Flutter Web and Search

1. Implement Search in Flutter Web

Let’s start with the algorithm

We extracted out the algorithm(StringSearch) for searching and put inside a separate file called string_search.dart

StringSearch(this.input, this.searchTerm)
  • input: List<String>, e.g [‘Hey’, ‘there’]
  • searchTerm: String which the user searched. e.g here

Condition: Length of searchTerm should be more than 1 letter. e.g …


Image for post
Image for post

Get rid of default crash dialog.

I don’t know about you but I feel very embarrassed when I deliver an app to tester or client for testing and it get crash. That moment is very painful for me.

“Live as if you were to die tomorrow. Learn as if you were to live forever.”

Image for post
Image for post

I personally don’t like that crash alert dialog that appears when my app gets crash. So I found an interesting library that will show an error screen instead of an error dialog.

Let’s get started.

What I’m going to use:

  1. Kotlin
  2. Android Studio
  3. Library

After creating a new project add this dependency in your build.gradle(:app)


Image for post
Image for post

In most of the mobile application, there are links which redirect the users to some external website for further read about particular section or an article. Therefore we will need a way to accomplish this in our Flutter app.

There is no build-in widget to add a link to text in Flutter. But there are some work-round which we can use to accomplish the same goal.

Add the plugin

First, you need a url_launcher plugin if we need to redirect the user to the external website. Load the pubspec.yaml and apply that plugin

url_launcher: ^5.7.5

Run the following command to get the plugin or your…


Image for post
Image for post

Target Audience: Beginner

Recipe: Learn to use the Expanded layout widget to create responsive layouts for Flutter applications.

Focus Widget: Expanded

The Expanded widget is a single child layout widget which means it can have only one child assigned to it. In this example, the Row widget has three children built using childWidget(). Each of the children is wrapped in the Expanded widget. All children expand themselves in the direction of the main-axis, which is horizontal in this case. However, when a value for flex the property can be provided to resolve any competition for space. …


Image for post
Image for post

Target Audience: Beginner

Recipe: Learn to use the FittedBox layout widget to create responsive layouts for Flutter applications.

Focus Widget: FittedBox

The FittedBox widget is a single child layout widget which means it can have only one child assigned to it. In this example, the Row widget is added as a child to FittedBox widget. The Row widget has two Image widgets as its children. Normally, the second child of Row widget will overflow to right when it renders its children on a screen size which is not sufficient to accommodate all of its children. However, with FittedBox this problem of widget overflowing is solved. …


A post-league synopsis on how to conduct an online Quiz Competition

Image for post
Image for post
Correct answers + Fastest fingers first = Flutter Box 📦

2020 has been tough, and people have been staying home for months now. Amidst this pandemic, we continued to carry out out community events through the platform of Flutter Karachi, Pakistan; and it has been amazing to learn a lot of novel things during this time. During the time of Flutter Day community events, we came up with the idea of hosting an online quiz competition which was followed by a complete separate Quiz League which was one of its own kind, the winners of which were shipped a Flutter Box. …


Flutter Web and Navigation History

How to know the navigation history in Flutter Web? Hmm…

All in one Flutter resource: https://flatteredwithflutter.com/flutter-web-and-navigation-history/

Flutter Web and Navigation History

Begin…

View the demo here

Website: https://web.flatteredwithflutter.com/#/

We will cover briefly about

  1. Storing navigation routes
  2. Implement navigatorObservers
Image for post
Image for post
Flutter Web and Navigation History

1. Storing navigation routes

It's quite clear, we need a data structure for storing routes.

Thought process: When we navigate between different links in a browser, the last link is usually the first to be traced back (on click of the back button).

Image for post
Image for post
Flutter Web and Navigation History

Going 1 link to several

  • You navigate to link A
  • After a while, you go to link B
  • Finally, you end up at the link…


Fluter is a great framework for cross-platform that helps saves time and effort to launch a new product. However, it can be a bit tricky to implement a different type of AlertDialog. This post will provide a boilerplate for common AlertDialogs that you can use in your project with the Material design standard.

We will use some widgets: AlertDialog , RadioListTile, SingleChildScrollView , CheckboxListTile , TextFormField , ListView , ListTile , Column , Center , Flatbutton , Container, Text

Here are the dialogs will be built in this post.

Image for post
Image for post

This post requires you need to have the basic knowledge about Flutter development like the widgets, manage state with the ChangeNotifier. …


Android Material Design!!

Components, Animate your FAB and BottomAppBar!

Image for post
Image for post

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store