Skip to content

Latest commit

 

History

History
68 lines (41 loc) · 2.31 KB

Day 2.md

File metadata and controls

68 lines (41 loc) · 2.31 KB

Day 2 - Layouts in Flutter

Layouts in Flutter

  • starting repo

  • Container Widget

    • It is used in a lot of places
    • Takes up all space available on screen (or of parent)
    • Single child widget which means it can contain only one more widget
    • If there is a child in container it resizes to the child's size

  • Safe Area

    • Takes care of status bar and put content in main screen

  • Container properties

    • Width
    • Height
    • Margin - EdgeInsets.all,EdgeInsets.symmetric
    • Padding

  • List of specific types - By default List can contain dynamic objects - We can specify the type of List by declaring it like this List - Example, List names = ['Arnav', 'Mark', 'Raj' ]

Multi child widgets - Rows & Columns

Widget types

  • Most of the layouts have nested elements and Rows & Columns allow us to create such layouts

catchup gist

  • MainAxisSize min and stretch
  • MainAxisAlignment to show center, start, end and spaceEvenly

  • crossAxisAlignment
    • make width of all 100
    • make width of one 300 and then explain what's happening
  • use crossAxisAlignment.stretch and get rid of width property on containers

Layout cheat sheet

Exercises for the day:

  1. Design the layout given below Starter Repository

  1. NewYork Times Layout without font styles

  1. Stretch - Add styles to text and icons at the bottom to make it look like this