How to create slide menu or drawer in flutter.



Drawer in flutter, it's old and very easy to integrate. Because you may be found so many tutorials on this topic.

So don't west much time for explanation or theory. But for iOS user might be found issue in swipe to navigation back page after click on menu item.

Instead of use below code in onTap() Method of ListTile



onTap: () {
  Navigator.pop(ctxt);
  Navigator.push(ctxt, new MaterialPageRoute(builder: (ctxt) => new FirstPage()));
}

Use pushReplacement in onTap().


onTap: () {
  Navigator.pushReplacement(ctxt, new MaterialPageRoute(builder: (ctxt) => new FirstPage()));
}
For more information about pushReplacement.


Please Click Here to download source code.





How to convert String to Date and Date To String in Flutter.


MorUde Frrr - (Fly Or Not)


Many developer has question like how to convert String to Date or Date to String in Flutter? I’m gonna explain you both.

First we need to add new package date_format in “pubspec.yaml” file. Below is link that will help you for more information.











x


After installing the “date_format” package you have to import package in you .dart file.


import 'package:date_format/date_format.dart';

1)Convert Date to String

void convertStringFromDate() {
  final todayDate = DateTime.now();
  print(formatDate(todayDate, [yyyy, '-', mm, '-', dd, ' ', hh, ':', nn, ':', ss, ' ', am]));
}
     
Call above function by convertStringFromDate() that will print date that you given format. Also check your self by changing “yyyy to yy/ mm to MM or m/ dd to d” etc.
2)Convert String to Date

void convertDateFromString(String strDate){
  DateTime todayDate = DateTime.parse(strDate);
  print(todayDate);
  print(formatDate(todayDate, [yyyy, '/', mm, '/', dd, ' ', hh, ':', nn, ':', ss, ' ', am]));
}
  

Call above function by convertDateFromString('2018-09-27 13:27:00') and output will be flutter: 2018/09/27 01:09:00 PM


Create Login form and validation in flutter




Before we start simple login form, let me tell you some basic scenario what types of main widgets and GlobalKey  we are using here 

  • Form widget :: Actually form widget is container controller or we can said it’s group for form fields. When we use form widget also we have to set GlobalKey for uniquely identify current form and you can access other property of the form.

  • TextFormField Widget  :: Form without input field? We can’t visualize. We are creating form because end-user can input some data so here we are using TextFormField for get input from the end-use. It’s material design text input and it has validate method that will help us for validate this text field.

  • RaisedButton Widget :: It’s simple material design button and has click method that we will help us to execute another action.

In our demo we will use GlobalKey for access Form and Scaffold Widgets and its property. For more information click on GlobalKey I already attached link on that.





Example:


import 'package:flutter/material.dart';

void main() => runApp(new FormValidation());

class FormValidation extends StatelessWidget {
 @override
   Widget build(BuildContext context) {
     return new MaterialApp(
       title: "Form validation",
       home: LoginScreen(),
     );
   }
}

class LoginScreen extends StatefulWidget {
@override
 State<StatefulWidget> createState() {
   // TODO: implement createState
   return LoginScreenState();
 }
}

class LoginScreenState extends State <LoginScreen> {
 final _formKey = GlobalKey<FormState>();
 final _scaffoldKey = GlobalKey<ScaffoldState>();

 String _email;
 String _password;

 @override
   Widget build(BuildContext context) {
     // TODO: implement build
     return new Scaffold(
       key: _scaffoldKey,
       appBar: new AppBar(
         title: new Text("Login")
       ),
       body: new Container(
         padding: const EdgeInsets.all(20.0),
         child: formSetup(context)
       ),
     );
   }

   Widget formSetup(BuildContext context){
     return new Form(
           key: _formKey,
           child: new Column(
             children: <Widget>[
               new TextFormField(
                 decoration: InputDecoration(
                   hintText: "aa@bb.com",
                   labelText: "Email"                   
                 ),
                 keyboardType: TextInputType.emailAddress,
                 validator: (val){
                     if (val.length == 0)
                       return "Please enter email";                     
                     else if (!val.contains("@"))
                       return "Please enter valid email";                     
                     else
                       return null; 
                   },
                   onSaved: (val)=>_email=val,
               ),
               new TextFormField(
                 decoration: InputDecoration(
                   hintText: "Password",
                   labelText: "Password"                   
                 ),      
                 obscureText: true,          
                 validator: (val){
                     if (val.length == 0)
                       return "Please enter password";                     
                     else if (val.length <= 5)
                       return "Your password should be more then 6 char long";                     
                     else
                       return null; 
                   },
                   onSaved: (val)=>_password=val,
               ),
               new Padding(
                 padding: const EdgeInsets.only(top: 20.0),
               ),
               new RaisedButton(
                 child: new Text("Submit"),
                 onPressed: (){
                   if (_formKey.currentState.validate()) {
                     _formKey.currentState.save();
                     _scaffoldKey.currentState.showSnackBar(new SnackBar(
                       content: new Text("Your email: $_email and Password: $_password"),
                     ));
                   }
                 },
                 color: Colors.blue,
                 highlightColor: Colors.blueGrey,                 
               )
             ],
           ),
         );
   }
}





Here in that above demo we are using StatefulWidget and below GlobalKeys


final _formKey = GlobalKey<FormState>();
final _scaffoldKey = GlobalKey<ScaffoldState>();

For access its state and property.

We have two TextFormFields for input Email and Password. And it has  InputDecoration for decorate text input. The main method is validator method of Text field that will help you for validate form.

At the last RaisedButton, 


new RaisedButton(
     child: new Text("Submit"),
         onPressed: (){
              if (_formKey.currentState.validate()) {
                  _formKey.currentState.save();
                  _scaffoldKey.currentState.showSnackBar(new SnackBar(
                       content: new Text("Your email: $_email and Password: $_password"),
                ));
               }
           },
      color: Colors.blue,
      highlightColor: Colors.blueGrey,                 
)


It has one method onPressed in that method, we are checking form validation by

if (_formKey.currentState.validate()) …..

We can access form current state by using formKey. validation() method return true then Just display toast(showSnackBar). If return false then display string error message that already putted in validation() method of TextForm Field

That’s It!!


Hope you guys this is enough for your understanding. If you have any query or question then comment it.




Repeats value of number of time in List or Array in Flutter?



As we know in many programming languages like swift and etc. if you want to take array or list that has same value in all the index then we can do by one line of code. Repeat same value for specific time.

Ex. (In Swift language)
If In the Array I want to repeat 0 for 5 times then I can do by one line of code like below.
let fiveZeros = Array(repeating: "0", count: 5)
print(fiveZeros)
// Prints "["0", "0", "0", "0", "0"]"

So I'm looking same for flutter. is there any specific built-in function that will help us to achieve same features?

Yes in the Flutter you can use "filled factory of List" That will help us to achieve same features.

Ex.

final fiveZeros = List.filled(5, 0);print(fiveZeros);  //-> [0, 0, 0, 0, 0]


If you have any query or question then please give your feedback as comment.

Different between StatelessWidget and StatefulWidget in the flutter


As we are beginner for Flutter and many of the developers are getting confused for StatelessWidget and StatefulWidget. Here we are going to clear you what is exact difference between StatelessWidget and StatefulWidget.


Same like another language Like Swift, Kotlin Etc. you may heard about mutable and immutable property. Same things we can apply here for those widget.
In the Swift we declare let keyword with static variable and var keyword with dynamic variable.
So what is mutable and immutable ?
  • Mutable means changeable, you can change property of mutable variable or function at run time. In other world we can say it’s value is dynamic.
  • Immutable mean properly of the variable or function will not be change after set it once. In other world we can say it’s value is Static.
For StatelessWidget - It’s static, This widget will not be change after run time.


StatefulWidget - It’s dynamic, This widget will change any time where you want.
So If any API will call and JSON data are coming and You want it to display on ListView then you must use with StatefulWidget. Any operation if you want to display on run time that will be done by StatefulWidget.
StatelessWidget - Work with static data. If you render any static list that will not be change any time that you can go with this widget.



Hope you guys this is enough for your understanding. If you have any query or question then comment it.