• Some Useful Flutter Widgets

    Commonly used Flutter Widgets to speed up your mobile app development


    1. Container widget: as the name suggests acts like a container for its child widget. It combines the features from common positioning and sizing widgets. For example one can use this  widget to add styling properties like height, width, padding and background-color to its child widgets.
      1. A container has a child as one of its properties and note that there can be only one child as a container is a single-child layout widget.
      2. Important note: a container with no children tries to be as big as possible meaning they try to take up as much as space as possible on the screen. Whereas a container with a child will size itself to the size of its child widget.
    2. Column/Row widget: both of these are very common layout widgets. They allow us to design and lay child widgets either vertically (in case of Column) or horizontally (in case of Row). Here are few important features of Column/Row widgets:
      1. These widget do not scroll. If you need scolling feature, use something like a ListView widget (which displays its child widgets in a sequence with a scrolling view).
      2. They have a children property which is a collection or list of Widgets to display. Hence, these are very common widgets to use if you have more than one child widgets.
      3. They also support properties like mainAxisAlignment (how the children are placed along main axis - this is vertical for Column and horizontal for Row), crossAxisAlignment (how the children are placed along secondary/cross axis).
      4. They do not support some styling properties like padding. For padding wrap the widget with either a Container (or Padding) widget.
    3. Center widget: is used to center one widget (say WidgetB) inside another widget (say WidgetA) like so:
    4. Widget build(BuildContext context) {
             return Container(
                         child: WidgetA(
                                   child: Center( // centers WidgetB inside WidgetA
                                              child: WidgetB(
                                                         child: ...,
                        ... all closing parentheses
      }
    5. Image widget: acts like a picture frame gives us the frame to load a picture from many different sources like url, local-folder/asset, file etc.
      1. A very interesting discussion on how to fit images inside their containers StackOverFlow: Flutter How to fit an image
  • 0 comments:

    Post a Comment

    ADDRESS

    Lalitpur, Kathmandu Valley, Province 3, Nepal

    EMAIL

    ashish.karki3@gmail.com

    TELEPHONE

    +977-9861487950