/flutter-stateless-widgets

A demo app developed in flutter showcasing stateless widgets.

Primary LanguageDart

app_widgets

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

NOTES ON FLUTTER

Creating flutter app using Flutter CLI - flutter create <project_name>

Containers

They contain other widgets. Container is akin to <div> element in web development.

BOX CONSTRAINTS
Somtimes constarints of a particular widgets are passed to their childrend. For example, the widgte MaterialApp has the constraint to fill the entire available space on the screen and this constraint is passed to the Container present in it.

Even if you explicitly give width and height properties to the child: Container, it will ignore them.

Many of the boxes in Flutter, especially those that just take a single child, pass their constraint on to their children. This means that if you nest a bunch of boxes inside each other at the root of your application’s render tree, they’ll all exactly fit in each other, forced by these tight constraint.

Tight Constraints: The constraints are sometimes “tight”, meaning that they leave no room for the render box to decide on a size (for example, if the minimum and maximum width are the same, it is said to have a tight width).

Generally, there are three kinds of boxes, in terms of how they handle their constraints:

  1. Those that try to be as big as possible. For example, the boxes used by Center and ListView.
  2. Those that try to be the same size as their children. For example, the boxes used by Transform and Opacity.
  3. Those that try to be a particular size. For example, the boxes used by Image and Text.

Margin or Padding: EdgeInsetsAll(16.0) is used to create margin and paddings on all 4 sides of the box. If you want to choose a specific side to add padding/margin, then use EdgeInsets.Only(left: 16.0).

TEXT WIDGET

The text widget displays a string of text with a single style.
It can be single line or multi-line. There are a large number of properties.

Using CUSTOM FONTS:

  1. Import font files.
  2. pubspec.yaml - File containing info about project metadata and dependencies
  3. Use the font in widgets

Now here you can either add custom fonts to specific widgets of one-by-one, or can add custom font as the default font for your app.

SCREEN SIZE - ROWs/COLs - POSITIONING

The Row layout is a collection of child widgets placed horizontally.
The Column layout is a collection of child widgets placed vertically.

Because Row contains an array of widgets, it doesn't has a Child property. It has Children property.

NOTE: The Row widget does not scroll. It is considered an error to have more children in the row than we have the available room.

If multiple children are expanded, the available space is divided amoung them.

LOADING IMAGES

There are a large number of sources you can load images in your flutter app:

  1. File
  2. Assets
  3. Network
  4. Provider
  5. Memory

NOTE: Flutter does not support SVG images

Update the pubspec.yaml file with assets.

BUTTONS

Raised Button: Use it when a lot of content is flat or when there is empty space.

For a button to be raised, you need to set the onPressed property, which will call a function. If you omit this property, the button will be flat and greyed out.

In showDialog() builder is a function handler, so we need to create a function that accepts a single argument (BuildContext) and returns a WIDGET.