DEV Community: Chinmay Kabi

Advanced form handling with vanilla Flutter

Chinmay Kabi — Sat, 26 Mar 2022 10:23:01 +0000

Disclaimer: This article goes about implementing features in a highly opinionated manner, which may not be in line with many of the tutorials out there. So have an open mind and read along! Cheerio :)

One of the things every front-end developer has to face, regardless of their product type, is to handle form inputs. Designing a form and handling its inputs have never been an exciting prospect for a developer, especially when they have to handle the UI, validation, data on submission, input formatting all at once. Luckily there are some tricks in Flutter we can use to make handling form fills a little
bit easier. This article will cover 4 broad aspects of forms

Prefilling/Storing data
Input formatting
Validation
Custom form field

For this tutorial we will be making a simple form to create a new profile. This will include text fields to enter name, mobile number, postal code and upload an image. The behavior for each field will be as follows

Text field	Data type	Input format	Validation
Name	String	Alphabets only	Name != empty
Mobile no	String	Numbers only	Length ==10, only numbers
Profile Image	File	Image(jpg, png)	File !=empty

Setting up the project

Let’s create a new flutter proiect and then clean up the main.dart file to the following code below.

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // ignore: prefer_const_constructors
    return MaterialApp(
      title: 'Better Flutter Form Demo',
      home: FormPage(),
    );
  }
}
class FormPage extends StatelessWidget {
  FormPage({Key? key}) : super(key: key);
  final _formKey = GlobalKey<FormState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Better Flutter Forms'),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: [],
        ),
      ),
    );
  }
}

It is always a good idea to make the widgets as modular as possible, so we will be making a custom widget which will handle all our text input, a CustomTextField. Create a file custom_text_field.dart and add the following code.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class CustomTextField extends StatefulWidget {
  CustomTextField(
      {Key? key})
      : super(key: key);
  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}
class _CustomTextFieldState extends State<CustomTextField> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextFormField(),
    );
  }
}

We will go on adding whatever properties we require to our custom widget and use it in the form.

Prefilling/Storing data

Prefilling text in a textfield or getting current data of a textfield is usually done using a TextEditingController. But this does not scale well when dealing with multiple controllers in a form. A much easier way to deal with flow of data is to use a model class object to handle everything. Let us create a class for our data in this form.

import 'dart:io';
class Profile {
  Profile(
      {required this.name, required this.phoneNo, required this.profilePic});
  String? name;
  String? phoneNo;
  File? profilePic;
  Profile copyWith({String? name, String? phoneNo, File? profilePic}) =>
      Profile(
          name: name ?? this.name,
          phoneNo: phoneNo ?? this.phoneNo,
          profilePic: profilePic ?? this.profilePic);
}

TextFormfield has a built-in property called initialValue which when not null prefills the text field with the data passed. It also has a callback called onChange which is fired everytime user inputs something in the text field. To expose these functioality from our CustomTextField, we add the following properties to it.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class CustomTextField extends StatefulWidget {
  CustomTextField(
      {Key? key,
      required this.hintText,
      required this.initialValue,
      required this.onChanged,})
      : super(key: key);
  final String? initialValue;
  final Function(String) onChanged;
  final String hintText;
  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}
class _CustomTextFieldState extends State<CustomTextField> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextFormField(
        initialValue: widget.initialValue,
        onChanged: widget.onChanged,
        decoration: InputDecoration(
          hintText: widget.hintText,
        ),
      ),
    );
  }
}

We add the name and phone no fields to our form.

class FormPage extends StatelessWidget {
  FormPage({Key? key, Profile? profile})
      : _profile = profile ?? Profile(),
        super(key: key);
  final _formKey = GlobalKey<FormState>();
  Profile _profile;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Better Flutter Forms'),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: [
            CustomTextField(
              hintText: 'Name',
              initialValue: _profile.name,
              onChanged: (value) => _profile.name = value,
            ),
            CustomTextField(
              hintText: 'Phone No',
              initialValue: _profile.phoneNo,
              onChanged: (value) => _profile.phoneNo = value,
            )
          ],
        ),
      ),
    );
  }
}

You can see the data being prefilled in the images below.

As seen in the example, the text field will now prefill form data depending on whether it has been passed the data or not, doesn’t matter how many fields there are! Had we used controller for each text field, we would have to take care of each prefill, which does not scale properly. Similarly all the data changes are neatly stored in _profile .

Input formatting

Taking in improper inputs from a form and processing it can cause a lot of problems. While they can always be checked for before submission, a better UX would be to let the user not make that mistake while entering itself. We use a property called inputFormatters for that. It allows or rejects user input depending on the RegEx pattern we pass it. Another parameter that will come handy is an input length. Let us add these two properties to our CustomTextField. Also while we are at it, let’s add some decoration to make the UI look decent!

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class CustomTextField extends StatefulWidget {
  CustomTextField(
      {Key? key,
      required this.hintText,
      required this.initialValue,
      required this.onChanged,
      this.inputFormatters,
      this.maxLength})
      : super(key: key);
  final String? initialValue;
  final Function(String) onChanged;
  final String hintText;
  final List<TextInputFormatter>? inputFormatters;
  final int? maxLength;

  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}
class _CustomTextFieldState extends State<CustomTextField> {
  final _borderStyle = OutlineInputBorder(
      borderSide: const BorderSide(
        color: Color(0xfffafafa),
      ),
      borderRadius: BorderRadius.circular(8));

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextFormField(
        initialValue: widget.initialValue,
        onChanged: widget.onChanged,
        maxLength: widget.maxLength,
        inputFormatters: widget.inputFormatters,
        validator: widget.validator,
        decoration: InputDecoration(
          fillColor: Colors.grey.withOpacity(0.1),
          filled: true,
          enabledBorder: _borderStyle,
          focusedBorder: _borderStyle,
          hintText: widget.hintText,
          contentPadding:
              const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
        ),
      ),
    );
  }
}

In case of name, we only want alphabets and space to be allowed. For this we will be using a predefined input formatters called FilteringTextInputFormatter. This has two methods which take in a RegExp as an input, allow() and deny() , which can used depending on your filtering strategy. Here we want to allow only alphabets and spaces, and the RegExp for that is
[a-zA-Z]+|\s . So we will implement this by passing the following to our name field.

CustomTextField(
              hintText: 'Name',
              initialValue: _profile.name,
              onChanged: (value) => _profile.name = value,
              inputFormatters: [
                FilteringTextInputFormatter.allow(
                  RegExp(r"[a-zA-Z]+|\s"),
                )
              ],
            ),

(Note : Writing a string like this, r"some string" means that we are declaring it as a raw string, meaning that they will be treated as the character they are visible. No string interpolations will work inside a raw string and no characters which usually need to be escaped will require escaping anymore, which makes it useful while working with RegExp patterns).

Now when we try typing in our name field, the only input accepted are alphabets and space!

The same can be applied for number field by using an inbuilt method called FilteringTextInputFormatter.digitsOnly. Also we need to fix the input length in phone field, so we pass a maxLength of 10.

Validators

These are callbacks fired when a form is validated. These functions receive the latest values in the field, and if any string is returned from these functions, then it is understood that the input in that particular field is invalid, and the string returned is the error text. In our custom widget, we implement a validator. After adding a validator callback, our CustomTextField widget looks like this

class CustomTextField extends StatefulWidget {
  CustomTextField(
      {Key? key,
      required this.hintText,
      required this.initialValue,
      required this.onChanged,
      this.inputFormatters,
      this.validator,
      this.maxLength})
      : super(key: key);
  final String? initialValue;
  final Function(String) onChanged;
  final String hintText;
  final List<TextInputFormatter>? inputFormatters;
  final int? maxLength;
  final String? Function(String?)? validator;
  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}
class _CustomTextFieldState extends State<CustomTextField> {
  final _focusNode = FocusNode();
  final _borderStyle = OutlineInputBorder(
      borderSide: const BorderSide(
        color: Color(0xfffafafa),
      ),
      borderRadius: BorderRadius.circular(8));

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextFormField(
        initialValue: widget.initialValue,
        onChanged: widget.onChanged,
        maxLength: widget.maxLength,
        inputFormatters: widget.inputFormatters,
        validator: widget.validator,
        decoration: InputDecoration(
          fillColor: Colors.grey.withOpacity(0.1),
          filled: true,
          enabledBorder: _borderStyle,
          focusedBorder: _borderStyle,
          hintText: widget.hintText,
          contentPadding:
              const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
        ),
      ),
    );
  }
}

In the name field, we can check for validity in the following manner

CustomTextField(
              hintText: 'Name',
              initialValue: _profile.name,
              onChanged: (value) => _profile.name = value,
              inputFormatters: [
                FilteringTextInputFormatter.allow(
                  RegExp(r"[a-zA-Z]+|\s"),
                )
              ],
              validator: (val) {
                if (val == null || val.isEmpty) {
                  return 'Enter a valid String';
                }
              },
            ),

When no error message is returned from the validator function, it means the input is valid.

While validation is working fine here, but here we have to press the submit button for validation to kick in. What if a user has not typed their full phone number and moved to type their name, the error message should pop up right then to complete the number, that would be good UX too! For that we have a property called autoValidateMode in the TextFormField. Setting it to autovalidateMode: AutovalidateMode.onUserInteraction means that validation for a field will kick in the moment user changes their focus to any other field.

Something’s wrong here, right? Validation fires up on user interaction, just how its name suggests, but we want it to fire once user focuses on another field. For that we will be using a FocusNode. We declare a FocusNode object inside the CustomTextField and assign it to the TextFormField. Now all we have to do is disable the validator when the field is in focus. We also will have to call setState() when focus changes, otherwise the error message won’t be shown on focus change by itself.

class CustomTextField extends StatefulWidget {
  CustomTextField(
      {Key? key,
      required this.hintText,
      required this.initialValue,
      required this.onChanged,
      this.inputFormatters,
      this.validator,
      this.maxLength})
      : super(key: key);
  final String? initialValue;
  final Function(String) onChanged;
  final String hintText;
  final List<TextInputFormatter>? inputFormatters;
  final int? maxLength;
  final String? Function(String?)? validator;
  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}
class _CustomTextFieldState extends State<CustomTextField> {
  final _focusNode = FocusNode();
  final _borderStyle = OutlineInputBorder(
      borderSide: const BorderSide(
        color: Color(0xfffafafa),
      ),
      borderRadius: BorderRadius.circular(8));
  @override
  void initState() {
    super.initState();
    _focusNode.addListener(() {
      if (!_focusNode.hasFocus) setState(() {});
    });
  }
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextFormField(
        focusNode: _focusNode,
        initialValue: widget.initialValue,
        onChanged: widget.onChanged,
        maxLength: widget.maxLength,
        inputFormatters: widget.inputFormatters,
        validator: (value) {
          if (_focusNode.hasFocus) {
            return null;
          } else {
            return widget.validator?.call(value);
          }
        },
        autovalidateMode: AutovalidateMode.onUserInteraction,
        decoration: InputDecoration(
          fillColor: Colors.grey.withOpacity(0.1),
          filled: true,
          enabledBorder: _borderStyle,
          focusedBorder: _borderStyle,
          hintText: widget.hintText,
          contentPadding:
              const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
        ),
      ),
    );
  }
}

Now that looks like polished UX, with just a few lines of code! This behavior will be default for all CustomTextField widgets.

Custom Form field

What makes a form widget differentiate from other widget is the data validation part. Usually developers may tend to take the easy route and validate any custom field separately, for eg - an image upload field, but that would not scale in case of a complex form. We will be making our own CustomImageFormField! Create a custom_image_form_field.dart and add the following code.

import 'dart:io';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
class CustomImageFormField extends StatelessWidget {
  CustomImageFormField({
    Key? key,
    required this.initialValue,
    required this.validator,
    required this.onPicked,
  }) : super(key: key);
  final File? initialValue;
  final String? Function(File?) validator;
  final Function(File) onPicked;
  File? _pickedFile;
  @override
  Widget build(BuildContext context) {
    return FormField(
        initialValue: initialValue,
        validator: (_) => validator.call(_pickedFile),
        builder: (formFieldState) {
          return Column(
            children: [
              GestureDetector(
                onTap: () async {
                  FilePickerResult? file = await FilePicker.platform
                      .pickFiles(type: FileType.image, allowMultiple: false);
                  if (file != null) {
                    _pickedFile = File(file.files.first.path!);
                    onPicked.call(_pickedFile!);
                  }
                },
                child: Container(
                  margin: const EdgeInsets.all(8),
                  padding:
                      const EdgeInsets.symmetric(horizontal: 32, vertical: 8),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: const Color(0xff707070).withOpacity(0.1),
                  ),
                  child: Column(
                    children: const [
                      Icon(Icons.upload_file),
                      Text('Upload profile picture')
                    ],
                  ),
                ),
              ),
              if (formFieldState.hasError)
                Padding(
                  padding: const EdgeInsets.only(left: 8, top: 10),
                  child: Text(
                    formFieldState.errorText!,
                    style: TextStyle(
                        fontStyle: FontStyle.normal,
                        fontSize: 13,
                        color: Colors.red[700],
                        height: 0.5),
                  ),
                )
            ],
          );
        });
  }
}

To make our own form field, we can design the UI in any way we want and justwrap it in a FormField. It has all the usual properties like validator and initial value. To pick up image, file_picker package was used. Depending on whether this field has an error or not, a widget is conditionally shown. Now when we make a bad submission, we get this kind of error.

FormField widget can be used to make form fields for a variety of uncommon inputs like file picker, date picker, radio buttons etc.
If we pass the Profile object in which we have saved all data to another screen and display the data, we see the following.

In this tutorial we learnt about how to handle prefilling and saving data, formatting our inputs, validating with a good UX flow, and making our own form field, all without using any third party form handling packages. All these things, when coupled together are enough to handle most of the forms.

Case in point : How Flutter optimizes widget rebuilds and why it used phone number as otp

Chinmay Kabi — Sat, 30 Oct 2021 09:08:02 +0000

I'm a man of few means, and a developer of even fewer lines of code.

This is my button

class CustomButton extends StatelessWidget {
  const CustomButton({Key? key, required this.title, required this.onTap})
      : super(key: key);

  final String title;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: onTap,
      child: Text(
        title,
      ),
    );
  }
}

This is my textfield

class CustomTextField extends StatelessWidget {
  CustomTextField(
      {Key? key,
      required this.hintText,
      this.fillColor = Colors.grey})
      : super(key: key);

  final String hintText;
  final Color fillColor;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 32),
      child: TextFormField(
        decoration: InputDecoration(
            hintText: hintText, fillColor: fillColor, filled: true),
      ),
    );
  }
}

... and this is my login screen with avant garde security

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool showotp = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: [
          !showotp
              ? CustomTextField(
                  hintText: 'Phone number',
                )
              : CustomTextField(
                  hintText: 'OTP',
                ),
          !showotp
              ? CustomButton(
                  onTap: () => setState(
                    () {
                      showotp = true;
                    },
                  ),
                  title: 'Send OTP',
                )
              : CustomButton(
                  onTap: () => ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('OTP Submitted'))),
                  title: 'Verify OTP',
                )
        ],
      ),
    );
  }
}

Looks about fine, right? Go through this gem of a code, and you will have a rough idea of how it will work. You can take it out for a spin on this dartpad.dev snippet.

Something isn't right

If you failed to notice, go back and try these steps again. Enter a phone number, press on send otp, and while the textfield changes, the phone number is prefilled in that field. You can see the otp hint text once you clear the prefilled number. But why is this behaviour happening?

Enter Flutter's Sublinear widget tree building

Sublinear widget building

A general adage for Flutter is "It's all widgets". For eg, Padding is not a property of a widget but a widget itself. As a result Flutter has to handle a deeply nested widget tree. Traversing this whole tree the usual way will result in bad performance, so Flutter has some tricks up its sleeve to achieve it in sublinear time.

One of these tricks is not visiting the tree if the child has not marked itself as dirty(change of state). This tree also holds the state of the widget. Now to find which of the widgets is dirty, a tree diff algorithm would be easier, but not necessarily efficient, so Flutter uses its own algotithm of O(N) complexity. Keep in mind that most layout alsorithms you will find are O(n^2) or worse, and a sublinear algorithm is key to achieve a 60fps render in Flutter

The child list reconciliation algorithm optimizes for the following cases:

The old child list is empty.

The two lists are identical.

There is an insertion or removal of one or more widgets in exactly one place in the list.

If each list contains a widget with the same key, the two widgets are matched.

Along with keys, the runtime type is also checked at the same level.

In my case, the runtime type was the same, and because there were no keys assigned to the widgets, they were considered to have the same state. So while the widget is switched because of a simple boolean flag, the state of that widget is not. And thus the state of the old widget is imposed on the new one, because the poor thing could not distinguish one from the other :(

The easy fix is to pass each of the textfields a unique key!

Why this felt like a bug to me at first was because we are accustomed to differentiating different objects of same runtime types depending on their instances, and at times by the data they hold. Things get clearer though once we understand why Flutter does the things it does, doesn't it?

If there's something more to it that I might have missed, feel free to chime in the comments!

Working with Firebase Cloud Firestore made easier with "withConverter()"

Chinmay Kabi — Mon, 28 Jun 2021 18:00:33 +0000

Disclaimer - This article is not about how to set up cloud firestore. firebase.flutter.dev is a good place to learn about that. This article is about an issue I face personally while using Firebase Cloud Firestore, and what I do to make life a little easier!

The Problem

Assuming you are a Flutter developer, you love dart for being strongly typed. But when we are dealing with Firebase Cloud Firestore, it returns a Map<String, dynamic> object. There are quite a few downsides to it.

We lose type safety- We may push data of an unintended data type
No code completion- You need to type all the keys of the map. Life's hell if the map is too nested :/

The Solution

We add some order to the chaos! We map this response to an object, simple! Like how we treat an api response, similarly.

The Demonstration

I have set up a firebase cloud firestore with a single document, with fairly nested data.

From this document we want to fetch the data field of the first achievement of the first friend, and also the name of the first friend.

Handle data the usual way

Future<Map<String, dynamic>?> getDataTheUsualWay(String document) async {
final _data =
    (await firestoreInstance.collection('users').doc(document).get())
        .data();
return _data;
}

Inside FutureBuilder, this is handled in the following manner.

...
FutureBuilder(
    future: getDataTheUsualWay('ENYMl6A76UTENuQ9fnOi'),
    builder:(BuildContext context,
        AsyncSnapshot<Map<String, dynamic>?> snapshot){
            return snapshot.connectionState != ConnectionState.done
        ? Center(child: CircularProgressIndicator())
        : Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: [
                Text(
                    'Data handled as how all other tutorials say '),
                Text(
                    'Name is ${snapshot.data!['people']['friends'][0]['name']}'),
                Text(snapshot.data!['people']['friends'][0]
                    ['achievements'][0]['data']),
                Text(snapshot.data!['people']['friends'][0]
                    ['achievements'][0]['type']),
                ],
            ),
            );
        }
)

You will be getting no help from the IDE whatsoever while typing snapshot.data!['people'['friends'][0]['achievements'][0]['data']. Any typos, or a wrong data type will result in an error. Because of which you will have to keep referring back to the database, hence slowing you down considerably.

Handle data the better way.

Firebase has a method called .withConverter(). What this does is that instead of dealing in Map<String, dynamic>, this method will deal in terms of an object of a serializable class. Didn't get it? Just follow along!

First, we need a json of the document. We can get that by doing this

var firestoreInstance = FirebaseFirestore.instance;
final _data = await firestoreInstance
    .collection('users')
    .doc('*replae with document id*') 
    .get();
print(json.encode(_data.data()));

For my example the output was this json.

{
   "achievements":[
      {
         "data":"Strong meme game",
         "type":"non-academic"
      },
      {
         "data":"Cleared multiple subjects without submitting assignments",
         "type":"academic"
      }
   ],
   "alive":true,
   "name":"Chinmay Kabi",
   "people":{
      "friends":[
         {
            "achievements":[
               {
                  "data":"Funny name",
                  "type":"non-academic"
               }
            ],
            "name":"Mr Thingumbob"
         }
      ]
   },
   "age":69
}

Now open Quicktype. This website helps you generate serializable classes from json, such that you pass the json to a method and it returns an object such that the keys of the map are the properties of this object! This is how it will look

Select dart from the options and it will generate the required code. Copy this code into a class, user.dart in my case.

After doing this, we can simply do this

Future<User?>? getDataTheBetterWay(String document) async {
    final _data = await firestoreInstance
        .collection('users')
        .doc(document)
        .withConverter<User>(
            fromFirestore: (snapshot, _) =>
                userFromJson(json.encode(snapshot.data())),
            toFirestore: (model, _) => json.decode(userToJson(model)))
        .get();
    return _data.data();
}

This returns a User object. Getting the name of this user is as simple as user.name, which the IDE will give you code suggestions for the moment you have typed user.n. We can display the same data we had shown before in this way.

FutureBuilder(
    future: getDataTheBetterWay('ENYMl6A76UTENuQ9fnOi'),
    builder: (BuildContext context, AsyncSnapshot<User?> snapshot) {
    return snapshot.connectionState != ConnectionState.done
        ? Center(child: CircularProgressIndicator())
        : Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: [
                Text('Data handled using my method'),
                Text(
                    'Name is ${snapshot.data!.people.friends[0].name}'),
                Text(snapshot
                    .data!.people.friends[0].achievements[0].data),
                Text(snapshot
                    .data!.people.friends[0].achievements[0].type),
                ],
            ),
            );
    },
),

Typing snapshot.data!.people.friends[0].achievements[0].data will be effortless for you because code suggestions! Also this ensures type safety, so a string cannot magically turn into a number(sorry JS people!). Such an arrangement is helpful when you have to refer a lot of fields of a document. But it only gets better!

Updating data the usual way

Updating the values of a top level field is easy, but what about a nested field? We will be updating the type field of the first achievements of the first friends

  Future<void> updateDataTheUsualWay(String document, String data) async {
    final userRef = firestoreInstance.collection('users').doc(document);
    final userData = (await userRef.get()).data();
    var friendsList = userData!['people']['friends'];
    friendsList[0]['achievements'][0]['type'] = data;
    await userRef.update({
      "people": {"friends": friendsList}
    });
    print(data);
  }

There is no way to update a particular index of an array and push the update, we need to use the whole array, and pick out the fields we want to update. Then we push an update for the whole array. If that array is nested inside another field, or a map, or (god forbid) another list, we need to pass the reference for those nested fields, so that Firebase knows what to update. This is done my typing the map with the properties manually, maintaining the structure until we hit the array we have mutated, then we pass the mutated array. In this case, we have mutated friends array. We have a copy of the mutated array. But we cannot pass it directly. Because it is nested inside people, we need to pass this map to the update().

{
    "people":{
        "friends":friendsList
    }
}

This is just for a single level nesting. Imaging having multi level nesting, and updating multiple fields in multiple levels. Thankfully, you don't have to!

Updating data the better way

We will be updating the same fields.

  Future<void> updateDataTheBetterWay(String document, User user) async {
    final userRef = firestoreInstance
        .collection('users')
        .doc(document)
        .withConverter<User>(
            fromFirestore: (snapshot, _) =>
                userFromJson(json.encode(snapshot.data())),
            toFirestore: (model, _) => model.toJson());
    await userRef.set(user);
  }

While calling this function, we can mutate the values of the properties as we feel like. So mutating the properties is something like this

User? user =await getUserTheBetterWay('ENYMl6A76UTENuQ9fnOi');
user!.people.friends[0].achievements[0].type = data;
updateDataTheBetterWay('ENYMl6A76UTENuQ9fnOi', user);

Clean right?
Feel free to mutate as many parameters you want. Everything can be done easily in a type safe way, and code suggestions will help you make coding this a breeze!

Sad thing is that I have not come across .withConverter() in any of the tutorials for Firebase Cloud Firestore. I hope this article acts as a primer for this, and makes working with Firebase Cloud Firestore a bit easier. This is by no means an in-depth article about .withConverter(), so feel free to comment about anything you want me to cover more about this in another article!

You can find the sample project I have made with this code here.

How !to make a calling app in Flutter for Android devices

Chinmay Kabi — Mon, 14 Jun 2021 16:29:17 +0000

Disclaimer- That ! in the title is not a typo, read it as not. This article is not a tutorial about how to make a whatsapp or skype type calling app, rather it is an article about how I fell short of making such an app using flutter.

I have been trying to make a voice calling app using Flutter. You will find many articles and videos about how easy peasy it is to integrate Twilio or Agora into a flutter app, but I could not find one resource which dived deep into making a true calling app in Flutter. What do I mean by true calling app ?

What a true calling app should have

On receiving data notification for call

The app should work even when it is in background, or terminated even.
The app should work over a keyguard(i.e- the lockscreen)
If the user is using the phone, a time sensitive notification should pop up.
When accepted, this should launch into its own UI, where you see the call details like caller id, duration etc.
This notification should be a full screen notificaion so that we can see the call interface when the device is locked and not in use.
During a call, when the user presses the back button, there should be a notification of a foreground service, which shows the info about ongoing call, and has options for disconnecting.
We can use either the inbuilt calling app, or we can implement our own screen for incoming/outgoing calls and for call in progress.
I wanted to build it without writing any platform specific code, or just the least amount of code.

Building the app

I am using the agora_rtc_engine plugin for making voice calls. You can find a tutorial on their official docs here. If we implement just what the tutorial says, we will be joining a voice channel as soon as we launch the app, and anyone having the same app can speak into and listen to this voice call.

So the voice call part is taken care of pretty easily. Now for how to get the behaviour of getting an actual phone call(getting a Caller ID screen, an accept/reject screen).

Take #1

I set up a FCM in flutter to receive data messages. You can read about difference between notification messages and data messages in my stackoverflow answer here. I went with data messages because I wanted to be in control of the notification I generate.

My next plan was to use flutter_local_notifications plugin and generate a notification. This plugin also has a full screen intent option, which when set to true can show your app when when phone is locked. But there are certain properties the notification should have.So I would listen to a data message, in both foreground and background/terminated state. Upon receiving one, I will generate a notification with full screen intent as true.

Properties of the notification

They should be non dismissable by swipe action. Only way it is dismissed if the ring is over or the user rejects the call.
The notification should have accept and reject buttons. Depending on the response, we should open either the ongoing call UI or reject the call.
There should be a non dismissable notification during the call, which will show some options like mute, disconnect, etc, along with caller id, duration etc.

The fault in our notifications

flutter_local_notifications does not have any solution for time sensitive notifications.
It also does not have any solution for having action buttons in the notification
awesome_notifications has a solution for action button, but no solution for time sensitive notification.
It also does not support full screen notifications.

Always has been eh?

Navigating to a particular screen upon tapping the notification is rather easy, as there are callbacks available for times when the app has been opened due to a notification. For this though you need to use a notificaication message, in which the notification will be handled directly by the plugin. If you want to implement it in data messages, you will have to write some platform dependent code as well.

Take #2

I tried handling the incoming calls like a gentleman!
Upon further digging I found out that apps like Whatsapp, Skype, Insta, Zoom etc handle incoming calls and outgoing calls using something called callkit in iOS and ConnectionService in Android. Plugins already exist for this in flutter, namely callkeep and flutter_callkeep.

These plugins, when asked to show a call, mimic the exact behavior as a normal telecom call would, using the same notifications, showing the same UI. Each interaction, like accepting a call, rejecting a call, toggling loudspeaker, holding a call etc all have their callbacks. Seems pretty straightforward, right?

Callkeep couldn't keep up

There is a bug in both the packages.

When you start a call, and reject a call then everything works fine.
When you accept the call though, the Call UI hangs all of a sudden. Fron the logs it seems like it is starting a lot of calls internally, and they all clash with each other.

The plugins are still a bit usable in Android Pie, but completely unusable in Android 10.

Why are we here, just to suffer?

Take #3

A hacky solution (platform side code included).

Our pain problem with notification is that we can't have action buttons + time sensitive + full screen notifications together. We can all compensate for this by generating our own notification using platform channel.

The plan

Write a function that can generate a notification of our requirements, a good example is time sensitive notification example here.
You can assign a pending intent to this intent for full screen notification. Flutter apps have only one activity. To get the reference to this activity, you can follow this snippet.


 java
    /// This code snippet is taken from flutter_local_notification plugin
    private static Intent getLaunchIntent(Context context) {
        String packageName = context.getPackageName();
        PackageManager packageManager = context.getPackageManager();
        return packageManager.getLaunchIntentForPackage(packageName);
    }

Open MainActivity as soon as the user either taps on the notification or accepts the call.
Check whether the app was called because of a notification tap by invoking some MethodChannel right as the app starts. Depending on the result, you can either navigate to the app as usual or to the Call UI screen.
If you find it difficult to determine if the app was started from a notification or not, using something like Shared Preferences. Store a key-value pair signifying that app was started in notification inside the BroadcastListener. Once the app has launched and a MethodChannel is involed asking whether app was launched from notification, reset it. P.S- This is a hacky solution, better solutions exist.
As soon as the app is launched, spawn another service, this time a foreground service. Every foreground service MUST have a notification associated with it. We can use this notification to signify an ongoing call, regardless of whether is in the app or outside it. This service runs until the user has disconnected the call.

Same energy as our solution

Take #4

What I feel is the legit solution!

Previously in the article I mentioned something about ConnectionService. This is the recommended way for any app that either

Can make phone calls (VoIP or otherwise) and want those calls to be integrated into the built-in phone app. Referred to as a system managed ConnectionService.
Are a standalone calling app and don't want their calls to be integrated into the built-in phone app. Referred to as a self managed ConnectionService.

What both callkeep and flutter_callkeep plugins offered is system managed ConnectionService. What we need is self managed. The main issue here is resources, or lack thereof. The only resource I could find is this guide. There are not any tutorials/blogs about how to implement this. We can learn how to implement this by looking at some existing projects though, a good point is AgoraIO-Usercase/Video-Calling repository.

Getting this functionality all wrapped in a flutter plugin is the best solution we can manage with flutter in my opinion. What I believe personally though is that implementing it in native is the easiest way out. That way we do not have to worry about handling communication between native android and flutter.

Flutter is a cross-platform UI toolkit that is designed to allow code reuse across operating systems such as iOS and Android, while also
allowing applications to interface directly with underlying platform
services. - Flutter architectural overview

Google considers Flutter as a UI toolkit, and personally so do I. Sometimes we may have to implement some framework level functionalities(like handling telephony in this case) just so that we can show a call accept/reject screen in flutter. This can be pretty straightforward in native android. So the question lies with the developer, is it worth the effort?

P.S - This article is everything I could find and make sense of while researching about this for 3 days straight. I decided to write this article because there are a lot of people on StackOverflow and Github Issues who do not have an answer to this question. While I have not been able to provide an answer, yet, I hope to make the question clearer.

I am not a pro developer, so if you find any discrepancies, feel free to comment, the whole point of this article to bring whatever little exists about this on the internet at a single place! Also, I'll be working on the plugin myself, I'll be updating the article with a link to the repo in some days.

project-spampr: The hero that tried saving hacktoberfest '20

Chinmay Kabi — Fri, 09 Oct 2020 12:36:47 +0000

Eh ! It’s the thoughts that matter, right?

For those who are still using Internet Explorer, Hacktoberfest is Digital Ocean’s annual month long celebration of Open Source community and contributions. Digital Ocean ships a T- shirt and stickers to the first 70,000 people who successfully open 4 pull requests to any public repository. At least that’s what it was for the past seven years until October 2nd 2020.

This year, things went tits up when a barrage of noobs bombarded public repositories with spammy pull requests. Some of the jewels being…

It was a maintainer’s worst nightmare come true, like a Github version of Denial of Service attack!. They had to reject those PRs, close them, label them invalid manually to prevent overcrowding. Within a day of Hacktoberfest, it had drawn massive flak for the mess it had caused. I have taken part in Hacktoberfest for the last 2 years, and the T shirts are very dear to me. If they were to be doled out for trash pull requests, then it would reduce the value of the T shirts the legitimate contributors had earned. So in the morning of 2nd October, I set out to restore the balance of the open source universe, all by myself…

The gameplan

Make a Github bot.
Find out a way to screen spammy PRs
Get it out ASAP !!!

The problems

I didn’t know the difference between a github action and a github bot, let alone how they work.
I believe JS should not exist on the face of this Earth, and now I had to code in JS.
I don’t know JS.
Webhooks what?

Good Luck and Godspeed…

I don’t know if it was my ignorance or lack of familiarity with JS, but I could hardly find any good documentation for a beginner testing waters in github app. Many of the tutorials I looked into were about Github actions(which I still don’t understand). It took me an hour or so before I found something called Probot .

It is a nice little Node JS module that actually did a lot of heavylifting. We can create a probot app scaffold using npm. It generates all the required files, along with a hello world program which you can start tweaking to understand how things work. To get it working, you need to have installed Node.js. Then you can create the basic scaffold using this.

We see a bunch of files being generated, one of them being index.js
(This is all the code that’s in there !)

The only thing to understand here is how webhooks and context works. Webhooks are continuously listening for any events on the other end. In the above code, it is listening to “issues.opened” event.

Next comes what context is and how it works. Context is just an awesome abstraction of all the data payload you receive from any event and a gateway to make API requests without having to write any code for API requests. Context has a lot of things that you can access through it. You can find a lost of it here . What I used in this case are the following.

If the webhook receives a trigger due to a pull request, it will receive data only for a pull request in the context, we don’t have to worry about it. Similarly for issues opening closing and other such events. So context.payload contains all the data we may need. Next if we want to post a comment, or publish a label to a PR or an issue, we can use context.github. One thing to note here is Pull Requests are to be treated as Issues when doing stuff common to both, for eg- commenting, labelling, assigning etc. I realised it the hard way after struggling for an hour or two. So I now had to comment on the PR opened, so I treated it like an issue and it worked!!

Next comes labels. It is the same as labels to be added to issues! Easy right?

One major thing to note here is you won’t find Probot documentation explaining in a lot of detail. You can see the parallel between this context and Octokit though. Do have a look at it though. Had I known that Probot uses Octokit under the hood, and commenting on PR has to be done the same way as issues, things would be over in an hour.

I wasted time so that you don’t have to.

Who’s been naughty in PRs?

Assumptions were made...

In a fairly active repository, the workflow usually is

An issue is opened by maintainers. Interested person interacts with maintainers and gets himself/herself assigned to the issue.
If there exists no issue related to the thing someone wants to contribute, they can open one. The flow is then similar to previous point.

The assumptions made were that

If someone has not been assigned an issue before, it means they are not entrusted with contributing to the repository by the maintainers.
If someone is assigned to any of the open issues, then the maintainers believe that the contributor is genuine and would make genuine contributions, regardless of which issue they end up sending a PR about.

Have a look at this video, you’ll understand better!

This was easy to achieve.

Get a list of all issues on a repository using a public API. For eg https://api.github.com/repos/Chinmay-KB/project-spampr/issues?state=open
Get a list of all the assignees to all open issues.
See if the username who opened the PR has any of the issues assigned to them.
If they are assigned, label the PR as approved, if not send a “personalized” comment out to them.

That’s as easy as it gets, right?

After that run npm start and the app is running on localhost already!

And here you are, ready to fight spammy PR, one repo at a time. For a few hours at least.
Digital Ocean declared that as of October 3, Hacktoberfest is an opt-in program for repositories. Now not just any PR would be counted as a legit contribution. Either the repository needs to have the hacktoberfest topic or the pull requests should have hacktoberfest-approved labels assigned to them to be counted as a legitimate PR. Sway of the mighty hand you see!

It was good learning for me though, from knowing nothing about Github bots to having deployed one on Heroku, all within 12 hours is quite a learning ! The bot never gained any traction, neither in the MLH hackathon I submitted this or the tweets I had sent out to MLH and Digital Ocean :(
// Detect dark theme var iframe = document.getElementById('tweet-1312644547369938944-976'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1312644547369938944&theme=dark" }
But there’s nothing like learning by doing, right?

Github repo here
This project was submitted to MLH Hero Hacks Devpost link