Tag Archives: dart

Search Dart dynamic json collection in Flutter

I am familiar with Lynq operation in C# , which I think one of the flexible tools the language provide us. Dart and Flutter has same feature , may be all modern language have them.

I this example I will show you how dynamic or any collection can filtered in Dart. We have a Json extracted collection which is a Linked list, the collection is extracted in the following way. (so you can understand how I get those)

var test_data =
          await http.get('https://api.covid19india.org/state_test_data.json');
      var tdata = json.decode(test_data.body);

Filtering the List

The about code is a part of a Covid Dashboard Example , which is a Flutter native app project. The source can be found on my GitHub Repo, in case you need them.

The list includes dictionary key,value pair , so I can search for them using the where. To do this I first covert the data into a List.

 var t_data = tdata['states_tested_data'] as List;

Then we can use where to filter the list using keys and get the list. Remember in place filter didn’t change any thing as follows.

t_data.where((element) =>element['state'] == 'Kerala')

we can get another list from the above as follows which what exactly we needed.

var l = t_data.where((element) =>
                 element['state'] == 'Delhi').toList();

Explore other Dart article to learn more about Dart and Flutter

Create a custom RawMaterial button in Flutter

Custom buttons help us create new UI with additional feature, Flutter allows you to create awesome controls/widgets combining existing ones. Our material button have following features

  • Icon
  • Icon Color
  • Splash color
  • Back ground color
  • Shape
  • title

To make this possible we used 7 widgets , lets checkout the code

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
//This Widget written by [manojap.github.io]
class MButon extends StatelessWidget {
  MButon({@required this.onPressed,@required this.title, this.style, this.splash, this.background_color, this.newshape, this.newicon, this.iconColor});
  final String title;
  final GestureTapCallback onPressed;
  final TextStyle style;
  final Color splash;
  final Color background_color;
  final ShapeBorder newshape;
  final IconData newicon;
  final Color iconColor;

  Widget build(BuildContext context) {
    return RawMaterialButton(
      fillColor: background_color,
      splashColor: splash,
      shape:newshape!=null ? newshape:  const StadiumBorder(),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 20),
        child: Row(mainAxisSize: MainAxisSize.min,
          children:  [
              newicon!=null ? newicon : Icons.help,
              color: iconColor!=null ? iconColor: Colors.amber,
              width: 8,
              style: style,
      onPressed: onPressed,

We have used Padding to accommodate space between borders and Text, so that the Text widget look neat and nice. A SizeBox widget is placed between Icon and the Text Widgets which add blank space.

You also noticed that we have checked for nulls make sure the Shape property not null ( It will fire an error , if it leave blank), if so it used an stadium border. You can also use the other borders like

          borderRadius: BorderRadius.all(Radius.circular(10))),


Here is Quick and Simple Floating button. Include the .dart[the above code] file to lib directory and import in main.drt.

        title: 'About',
        style: TextStyle(color: Colors.black),
        background_color: Colors.deepOrange,
        splash: Colors.orange,
        newshape: RoundedRectangleBorder(
           borderRadius: BorderRadius.all(Radius.circular(10))),
        onPressed: () { 

The complete code and other Widgets projects can be located @ Flutter-Widgets GitHub Repository