Tag Archives: flutter-howto

Add permission in Flutter Android app

Leave a reply

Flutter simplify the app development with ease and peace, I enjoy a lot of Fluttering. In this post we learn how to add Android Permissions in Flutter.

Flutter has its own packages to check for permission. Before using the permissions ,other than the Emulator you have to add the flowing line in android\app\src\main\AndroidManifest.xml file

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutter_c19dashboard">
    <!-- io.flutter.app.FlutterApplication is an android.app.Application that
         calls FlutterMain.startInitialization(this); in its onCreate method.
         In most cases you can leave this as-is, but you if you want to provide
         additional functionality it is fine to subclass or reimplement
         FlutterApplication and put your custom class here. -->
    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="C19 Dashboard"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
Electron

Create a basic project structure with Electron Forge


How to quickly create a sample project with necessary folder and files structure Nodejs Electron

Products

Book Keeper Free


Download Book Keeper Personal Edition – A accounting package for Windows users

Search Dart dynamic json collection in Flutter

Leave a reply

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

Checking null inside a widget in Flutter

Leave a reply

This is Flutter series, if you not familiar with Flutter development here is the post for you.

Encounter and treat null is a should have in development cycle. We know how to deal with null around class, objects and functions too. So how about widget and properties.

I have customized a Material button (I will pull that stuff in the next post) which accepting different type of borders, StadiumBorder() like stuff. By default I want to set StadiumBorder, if user not passing any values. Possibly fire an error on default value for shape.

So how do we check null ?

Here is the solution

shape:newshape!=null ? newshape:  const StadiumBorder(),

I check for the new value for shape , if it fails I use a default one. Quiet simple , isn’t it.

Flutter Widget of the day : Wrap

Leave a reply

Welcome to another Flutter Widget of the Day post. Today we have Wrap widget. Look at the following screen shot

Flutter Row with unfitted elements

Behind the scene

 body: Center(

        child: Row(


          children: <Widget>[
           FlatButton(child: Text('Butto1'),),
           FlatButton(child: Text('Butto2'),),
           FlatButton(child: Text('Butto3'),),
           FlatButton(child: Text('Butto4'),),
           FlatButton(child: Text('Butto5'),),
           FlatButton(child: Text('Butto6'),),


          ],
        ),
      ),

As we know for arranging controls in horizontal manner we use Row widget and for vertical use Column widget.

The screen bump with a Yellow bar, which is caused by controls that is not fitted on the screen. Flutter has beautiful way of showing Errors, lol.

To solve the issue like this, Flutter has a special Widget called Wrap which wrap the contents to next line as we saw on the following screenshot

Replace Row with Wrap

and the code will be as follows

body: Center(

        child: Wrap(spacing: 3,


          children: <Widget>[
           FlatButton(child: Text('Butto1'),),
           FlatButton(child: Text('Butto2'),),
           FlatButton(child: Text('Butto3'),),
           FlatButton(child: Text('Butto4'),),
           FlatButton(child: Text('Butto5'),),
           FlatButton(child: Text('Butto6'),),


          ],
        ),
      ),

Wrap has property children as Rows has ,so we can lay the controls as in Rows. It has many other property such as spacing which is handy . And the following quick video will help you further.

Flutter Widget of the day : AboutDialog

Leave a reply

Welcome to another Flutter Widget of the Day post. Today we have AboutDialog widget, which can be must have for every app, since every developer tech like to have some license info for the users.

How to use the AboutDialog

It is a good idea to create function to show the dialog which return a AboutDialog in a Flutter Manner as follows.

 void showAboutDialog({
    @required BuildContext context,
    String applicationName,
    String applicationVersion,
    Widget applicationIcon,
    String applicationLegalese,
    List<Widget> children,
    bool useRootNavigator = true,
    RouteSettings routeSettings,
  }) {
    assert(context != null);
    assert(useRootNavigator != null);
    showDialog<void>(
      context: context,
      useRootNavigator: useRootNavigator,
      builder: (BuildContext context) {
        return AboutDialog(
          applicationName: applicationName,
          applicationVersion: applicationVersion,
          applicationIcon: applicationIcon,
          applicationLegalese: applicationLegalese,
          children: children,
        );
      },
      routeSettings: routeSettings,
    );
  }

Now we are ready for calling the function inside the floating Actions button. You can now add all relevant information about your app, name, icon, version, etc as follows

 floatingActionButton: FloatingActionButton(
        child: Icon(Icons.help),
        onPressed: () {
          showAboutDialog(
              context: context,
              applicationName: "My APP",
              applicationVersion: "Beta",
              children: [
                Text('Developer: Manoj A.P'),
                Text('can be reached @ manojap@outlook.com'),
                Text('Web:' + 'http://manojap.github.io')
              ],
              applicationIcon: Icon(Icons.games));
        },
      ),

Besides there is children : [ ] which is used to add additional information in case you need them as a list of Widgets of your choice.

You may already noticed that flutter automatically included package license info for you, it can also be done manually

Create a custom Flutter Text Widget

Leave a reply

A Custom Widget can be composed of many widgets , in our Neat Textbox widget we used Decorated Box, BoxDecoration and Padding.

To make new widget first have to extend a class from StatelessWidget and then provide final variables , constructor and build method

The build method is the heart of any widget

Our NeattextBox accepting Text Styles ,so we have a final variable styl, it help us to use different font, color and other style properties

Padding used to adjust distance the boarder using EdgeInsets , also se the alignment of the Text. You can also utilize other BoxDecoration property as you wish

NeattexBox Widget

class NeattextBox extends StatelessWidget {
  final String title;
  final TextStyle styl;

  const NeattextBox({Key key, @required this.title, this.styl})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
        decoration: BoxDecoration(color: Colors.white),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            title,
            textAlign: TextAlign.left,
            style: styl,
          ),
        ));
  }
}

How to use the New Box

Here is the sample code implement the widget with styl

NeattextBox(
                styl: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                    color: Colors.deepOrangeAccent),
                title: "Dead :" + dist.status.deceased.toString(),
              )

Flutter Widget of the day : SafeArea

Leave a reply

SafeArea is must have widget for any app developing with Flutter and Dart. So what is SafeArea for ?

As the name indicates it secure the mostly you want to cover, it helps to prevent overlapping of UI to Notification area, bottom navigation and edges of the screen. So you can keep the app away from different type of notches, curved edges , and other hardware features.

All you have to do is to wrap your widgets with SafeArea() widget as follows

 SafeArea(
        child: Scaffold(

Color your AppBar title using Text Widget’s style in Flutter

Leave a reply

Flutter Android App in Emulator

This is my first post on this Flutter series, if you not familiar with Flutter development here is the post for you.

AppBar is the top most important section of any app. As we know Flutter app is collection of Widgets and Dart code.

So to color the AppBar title which is composed with Text Widget , we have to use style.

Using the TextStyle() we can specify all styling element available as follows

 appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title,style: TextStyle(color: Colors.yellow),),
      ),