Skip to main content


Flutter Development (Day-02):
  • This is the 3rd post from this blog.Today we are going to see some of the basic widgets in flutter and how ,where to use those widgets.
  • In Flutter everything is a widget like view in Android.Text,Padding,Margin are also widgets in Flutter.
  • All source code : Click Here

Scaffold:

  • Implements the basic Material Design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.

Appbar:

  • A Material Design app bar. An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar.

Container:

  • A convenience widget that combines common positioning of the widgets.

Row:

  • Layout a list of child widgets in the horizontal direction.

Column:

  • Layout a list of child widgets in the vertical direction.

Text:

  • A run of text with a single style.

Image:

  • A widget that displays an image.

Icon:

  • A Material Design icon.

Raised Button:

  • A Material Design raised button. A raised button consists of a rectangular piece of material that hovers over the interface.

  • Here I am using VS code because it is light weight and I am testing my app in real device because emulator is very slow in my laptop because i m using some old stuff.Hope you can understand that.Past I used emulator but now i m using my real device.

  • If you wish to use your real device then don't forget to turn on developer options.


Floationg Action Button:

  • A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.floatingActionButton field.


How to enable developer options:

  • open Settings > About phone > tap on Build number 7 times.

USB debugging:

  • Further you should turn on USB debugging in developer options.
  • Open settings > Additional Settings > Developer options > USB debugging >turn on
  • If you are using Red mi mobiles then you should turn off MIUI Optimisation option which is present in developer options (At the end of developer options scroll down).
  • If you want to use any fonts,images or any external packages don't forget to add it in pubspec.yaml file it is the root structure of our project.

Showing how all the widgets work:

Source Code: here

  • Don't be confused of the widget tree and don't feel bad about UI 👹👿.I m just focusing on how the widgets are layed out and their appearence on the screen .Further we will discuss about more stuff.Remember this tutorial is just for beginners who don't have previous knowledge about Dart and Flutter.I am also Intermediate level Flutter Learner 👲😎 .
  • 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.
                                                        
Follow me on:
 Twitter    Github     LinkedIn





Comments

Post a Comment

Popular posts from this blog

Flutter Development (Day-00): This is the First Post from this Blog.This blog will tell you about Flutter.If you don't know about it then the upcoming posts will explain you everything.This is 30 day tutorial which explains about Flutter for absolute beginners. prerequsites:  If you are enthusiastic and Curious. 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. Follow me on:   Twitter   Github     LinkedIn
5 comments
Read more
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
4 comments
Read more
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 .
2 comments
Read more