Tag: flutter-widget-of-the-day

A Editorial pick of Flutter Widget

Flutter widget of the day : Animated Folding Cell


Folding Cell offer more content on a list view by providing a detail section as inner Widget. We need not worry about create another widget for this, the pub.dev community have already made one for all of us ( Flutterians).

SimpleFoldingCell

To use the widget you need to add the dependency and import the package in dart file we want to use it. 

dependencies:
  flutter:
    sdk: flutter
  folding_cell: "^1.0.0"

and import the package as follows

import 'package:folding_cell/folding_cell/widget.dart';

The SimpleFoldingCell come with Create method which will configure the folding with frontWidget , innerWidget, cellSize, animationDuration etc. You have to do build widgets for the front and inner part of the folding and the rest will take care by the FoldingCell widget. Continue reading Flutter widget of the day : Animated Folding Cell

Flutter animated curved bottom bars, choice to make


Bored with regular old looking navigation bar at the bottom ? Flutter has many alternatives, you don’t have to stay with same UI for all time. I have two good looking curved navigation bar today curved navigation and convex bottom bar.

Curved Bottom Navigation in Flutter
Curved Bottom Navigation in Flutter

A Flutter Favorite, convex Bottom AppBar is my first choice, it look neater than the curved_navigation bar. For both all you need neat looking Icons and few lines of code to handle the clicks.

Curved Navigation
Curved Navigation in Flutter

In the curved you may struggle with button click , have to click the right place ( while using it in a emulator) , while for Convex stay cool, just wrote down the event handle on OnTap. Continue reading Flutter animated curved bottom bars, choice to make

Flutter Widget of the day : ToggleSwitch


ToggleSwitch is a simple customizable Toggle button with state management, will be right widget for making choice. Combine with con and Text , or make it colorful with colors from your favorite  pallet.  

Dependency and import

dependencies:
  flutter:
    sdk: flutter
  toggle_switch: "^0.1.8"
  
import 'package:toggle_switch/toggle_switch.dart';
ToggleButton
ToggleButton in Flutter

A sample ToggleSwitch widget with Icon

ToggleSwitch(
  minWidth: 90.0,
  initialLabelIndex: 1,
  cornerRadius: 20.0,
  activeFgColor: Colors.white,
  inactiveBgColor: Colors.grey,
  inactiveFgColor: Colors.white,
  labels: ['Male', 'Female'],
  icons: [FontAwesomeIcons.mars, FontAwesomeIcons.venus],
  activeBgColors: [Colors.blue, Colors.pink],
  onToggle: (index) {
    print('switched to: $index');
  },
),

You can use initialLabelIndex as a setter for the widget like editing page. Create variable for initial state such as int mychoice=0; and set it as intitialLabelIndex`and use it as setter say mychoice=1.

onToggle: (index) {
  switch (index) {
    case 0:
      //Todo
      break;
    case 1:
      //Todo
      break;
    case 2:
   //Todo
      break;
  }

The  OnToggle button can be used with if /witch statement so, that you can handle some action while user select the button.

Use ‘Get’ navigation manager to switch route /page in Flutter


Heard about Get , a light weight Flutter framework for developing apps with a smart Navigation manager. So what’s make Get Special, Is Flutter has Navigator to do what you want to do ? Yeh. But Get is smart and fast and it is one of the top package on pub.dev

How to use Get

Go to pubspec.yaml file add it as dependecies and also add an import statement to the top of your .dart file.

dependencies:
  flutter:
    sdk: flutter
  get:


import 'package:get/get.dart';

Get can be used to move to another widget page/route or simply calling Get.to . A prerequisite for this is a small change in main, replace the MeterialApp constructor with GetMaterialApp

void main() async {
   runApp(new GetMaterialApp(
    home: new MyApp(),
  ));
}

Suppose I have widget screens like ProductPage, I want to replace conventional flutter way of calling the push with Get.

Navigator.push(context,
     new MaterialPageRoute(builder: (context) => (Product())));

can replace with

Get.to(Product());

Get can be useful on various occasions, I save it for another post.

How to make a two way Dismissible ListView Items in Flutter


Two way sliding facilitate to add some quick action (hidden ) action to a listview. Flutter made it possible with Dismissible widget,  a built-in Widget come with Flutter.

  • Start to end sliding
  • end to start sliding

Dismissible

A dismissible widget can have two way action, up or down / left or right sliding. When the user slide it will removes from the list. This widget is ideal for a listview in action.

Although the direction property allows to set six directions

  1. up
  2. down
  3. horizontal
  4. vertical
  5. start to end
  6. end to start

Background

Using Background you can add two icons, for second action you need to add another background as second Background. Use a row to accompany some group of widget like Icon and image/Text/Icon. Make sure the Icon/Widget align properly.

(
                                  color: Colors.redAccent,
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    children: [
                                      Text(
                                        'Delete',
                                        style: TextStyle(
                                            fontSize: 22, color: Colors.white),
                                      ),
                                      Align(
                                        alignment: Alignment.centerRight,
                                        child: Icon(
                                          Icons.delete,
                                          size: 60,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),

Action

In the OnDismiss ( ) event listener you can write your quick action using beautiful dart code, which is responsible for removing the items from the list. I used HivBox instance for the list.

 onDismissed: (direction) {
                                  try {
                                    if (direction ==
                                        DismissDirection.endToStart) {
                                      projectBox.delete(key);
                                    } else if (direction ==
                                        DismissDirection.startToEnd) {
                                      project.projectStatus = "Finished";
                                      box.put(key, project);

                                   
                                    }
                                  } on Exception catch (e) {
                                    // TODO
                                    print(e);
                                  }

We are using direction property to identify the action and take necessary steps to update the list.

 

 

How to make any widget clickable in Flutter


Wanna make Container clickable ? or Icon widget, Flutter has a special widget for you, called GestureDetector.

Wrap any widget with GestureDetector and have a onTap(){ } or longPress () { } event. You can use the widget as follows

 GestureDetector(
          onTap: () {
            
          },
          child: Container(
            color: Colors.blueAccent,
            padding: EdgeInsets.only(top: 10),
            child: Column(
              children: []
))
)

Don’t hesitate to look at other posts like this

Make the UI interactive with InputDecoration widget in Flutter


Use InputDecoration widget has many thing to offer, from Helper text to Error catching conditional statement.

Every Flutter widget has reason to be served, InputDecoration widget allow us to dress up input form with label, helper text, Error text and many more. Here is sample TextField Decoration

TextField(          style: inStyle,
                    controller: projectDesc,
                    decoration: InputDecoration(
                      labelText: 'Description',
                      hintText: 'eg :SQL Server project',
                      helperText: 'Description',
                      errorText='I got some error for you'
                      border: OutlineInputBorder(),
                    )),

The labelText placed at the top, helpertext below the TextField widget, hintText showing inside the box like placeholder in HTML/CSS, border for placing some fancy border which also showing label while in editing mode.

Treat errorText programmatically

To display some error based on validation widget should able to detect change in siblings, which means the widget should be a StatefullWidget and then use it as follows

errorText:
    numberError ? 'It can't be blank' : null)

Also you need to use setState as follows in a Event of your choice

   setState(() {
                              numberTxt.text.isEmpty
                                  ? numberError = true
                                 })

Saving words for another post….. lol

Flutter Widget of the day : Wrap


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


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

Flutter Widget of the day : SafeArea


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(