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

Flutter

In CodeChai. More on Medium.

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
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. …


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. …


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. …


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. …


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…


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. …


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. …


For beginners who want to get half a step ahead in their Flutter learning journeys

Image for post
Image for post

Rather than writing setState every time you need to change UI, a cleaner way can be to use notifiers and listeners to let the UI change itself.

In this article we will look at the basic counter example and try to convert it to a cleaner version without using any external libraries or packages.

When you create a new Flutter application you get the following code

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center, …


Using streams in Flutter Web

How to use streams in Flutter Web? Hmm…

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

Flutter Web and Streams

Pre-Requisite:

This article assumes the reader has the knowledge of streams and Flutter Hooks. In case, you are unsure about hooks, refer to

Level : Kind of High!

Begin…

View the demo here

Website: https://fir-signin-4477d.firebaseapp.com/#/

We will cover briefly about

  1. Streams inside Forms
  2. Using Flutter Hooks
Image for post
Image for post
Flutter Web and Streams

Streams inside Forms

The parent widget is a HookWidget

class _StreamsView extends HookWidget {}

Inside this widget, we have created a form having 3 fields

  • The first field accepts anything except a blank
  • The second field accepts any valid…

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