Flutter Development

Flutter Development (Day-16): All source code :  Click Here . Sorry for the last two days I haven't posted anything because I am ready to leave my hometown to attend my college.Is there anyone from AndhraPradesh or Tamilnadu .If yes please provide your city name in the comment section. In this post we are going to proceed the next level of our todo app.We are going add animations to our app,Code clean Up and some UI changes. We add the animation to our FloationgActionButton.You may ask why you haven't add animations to others as well? I tried it but it is looking weird. Adding animations to  FloationgActionButton is very much similar to our previous basic animation tutorial. From the next we are going to deal with some of the important widgets which we will be using in further tutorials. If you are following this tutorial / blog please leave your opinion 👀 / say Hii ✋/ Your e-mail in the comment section that I can improve myself and it will gives boost for me to

Flutter Development (Day-15): All source code :  Click Here . In this post we are going to extend our knowledge by exploring more about animations in Flutter. In the last two posts we  have discussed about basic delay animations by creating a simple Login and SignUp Screens. In this post we are going to talk another two types of animations PARENT,VALUE CHANGED ANIMATION.  Parenting animation  -> In the below example one is the box moving along the x axis, and the same box is resizing. Value Changed Animation -> IN the below example the value is changing between 10 to 1 by including some Animation.        Demo:       Explanation Define the animations like   void initState() {     super.initState();     animationController = AnimationController(       vsync: this,       duration: Duration(         seconds: 4,       ),     );     parentAnimation = Tween<double>(       begin: -0.50,       end: 0.0,     ).animate(       CurvedAnimation(      

Flutter Development (Day-14): All source code :  Click Here . In this post we are going to create a login screen and add the animations to it.For copying the login page source code  here . In this post we are going to create a beautiful login screen with some cool animations.         Explanation: Steps to Follow: Define the Animation and AnimationController objects. Here we are defining 3 kinds of animations they are animation , delayAnimation , muchDelayAnimation . In the initState () define the animations using Tween and give the ranges in between. Here we define the Interval () object which is used to create a delay between the animations. dispose the animationController in order to leave all resources when animation is done otherwise there may be some issues while using our applications. Wrap the root widget with AniamtedBuilder which takes animation and builder properties. If you want to animate a particular widget then wrap it with Transform and give

Flutter Development (Day-13): In this post we are going to talk about basic animations in Flutter First we start the animation by creating two objects Animation animation, AnimationController animationController. Animation lets us deal with different types of animations like Tween. The tween is something in which you specify the input output range. Here begin is set to -1 and end is 0.0 which means the animation happens from out of the screen to the center of the screen. or rather, from the left most edge to the center of the app. We are also doing an ease in animation, so we specify the curve as fast out slow in. In the initState we provide the animation because the animation should occur when user launches the app.    void initState() {      super.initState();      animationController = AnimationController(        vsync: this,        duration: Duration(         seconds: 3,        ),       );      animation = Tween<double>(        begin: -1.0,

Flutter Development (Day-12): All source code :  Click Here . If you are following this tutorial / blog please leave your opinion 👀 / say Hii ✋/ Your e-mail in the comment section that I can improve myself and it will gives boost for me to do more tutorials. If you have any doubts feel free to ask me in the comment section or email me ramubugudi4@gmail.com I can definetly give reply. In the last two posts we have discussed and implemented a simple Todo application which is having some cool features.In the upcoming posts we will discuss about animations in Flutter. By the way I am not a pro in animations likely I too learning it by doing same as you. Here is a sample guide to quickly start about animations. First of all, let’s talk a little about animations. Animations are the best way to grab user attention to any user and improve his experience while using our app.  In flutter we use a separate component called Animation. The animation object is the one that get values an

Flutter Development (Day-11): In the last post we have discussed about how to implement brand new Todo application. All source code :  Click Here . Building its User Interface. How to display the data. How to remove the items from the List by tapping the Delete Icon or by Swiping it. Showing which item is deleted in the form of SnackBar. And finally modify some UI stuff. If you want to copy the exact same code  click here . List _todos = []; First of all create a empty list which will be holding all of our Todo's. When we tap on the ADD button we have to perfom some operation see below.   _validateForm() {if (_key.currentState.validate()) {setState(() {_todos.add(_controller.text);});_controller.clear();Navigator.of(context).pop();}} Here we have used setState () in order to refresh every single time of changing the data in the TextField and then we add the text to _todos list. Then we clear the data in the TextField and go back to homeScreen .

Flutter Development (Day-10): From Today onwards we are going to make some sample projects in order to put our prevous knowledge of learning. We are going to make a simple TODO application which I will be building it from scratch. This application will have Cards,Alert Dialogues,Implement Stack Operations,Swipe To Dismiss,Snackbars and lot more. This post will give you the setup and some basic Structure of the App. All source code :  Click Here . Screenshots: Explanation: From now-onwards I will explain only main things because when I place a lot of code here you will be confused .Thereby you can see all source code in my Github (I will place a link here). To copy the exact code to start building  click here .   theme: defaultTargetPlatform == TargetPlatform.iOS ? ThemeData.dark(): ThemeData.light() , here based on the OS we are defining the theme.Otherwise you can define by using ThemeData property. shape: RoundedRectangleBorder(borderRadius: BorderRa

Flutter Development (Day-09): In this post we are going to talk about some interesting topics in Flutter like  How to use Custom fonts  and Custom Icons in Flutter . How to use Themes and change the Theme across different screens and finally How to change the view of  the Screen based on Orientation like (portrait,LandScape). All source code :  Click Here . lib/main.dart: import 'package:allaboutflutterblog/tuts/customFonts.dart'; import 'package:flutter/material.dart'; void main() {   runApp(     MaterialApp(       home: CustomFonts(),       debugShowCheckedModeBanner: false,       theme: ThemeData(         fontFamily: "Montserrat",         brightness: Brightness.dark,       ),     ),   ); } import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:random_color/random_color.dart'; class CustomFonts extends StatefulWi

Flutter Development (Day -08): All source code :  Click Here .  In this post we are going to discuss more things which Flutter offers us to do in any app. This post will be taught about showing SnackBars , Material Drawer   , Card Widget , Swipe To Dismiss and finally how to write a concise code by using separate Functional Widgets and lot more will be soon......     Example here: lib/main.dart:  import 'package:flutter/material.dart'; class SwipeToDismissEx extends StatefulWidget {   @override   _SwipeToDismissExState createState() => _SwipeToDismissExState(); } class _SwipeToDismissExState extends State<SwipeToDismissEx> { // Automatically generate a list of 50 items.   List _items = List.generate(50, (i) => i + 1);   @override   Widget build(BuildContext context) {     return Scaffold( // Showing the Material Drawer       drawer: _showDrawer(),       appBar: AppBar(         title: Text("UI Elements"),         cente

Flutter Development (Day -07): All source code : Click Here Today we are going to talk more about lists and its types. Lists are very important in any field like if we want to return large amount of data we can't assing every single value to a String variable and display it is a tedious task to do , but Flutter makes it easy for us just wrap the list in a ListView widget then it is ready. Types of Lists. 1. Horizontal List 2. Vertical List 3. Grid List Horizontal List: Same as returning the ListView in previous tutorials just add a property scrollDirection:Axis.horizontal. Vertical List: We already discussed in our previous tutorials. Grid List: Sometimes you might want to display your items as a grid rather than a normal list of items that come one after the next. For this task, use the GridView widget. Ex. import 'Package:flutter/material.dart'; import 'package:random_color/random_color.dart'; class WorkingW