Flutter & Dart Development For Building iOS and Android Apps

A run of text with a single style.

A convenience widget that combines common painting, positioning, and sizing widgets.

Layout a list of child widgets in the horizontal direction.

Layout a list of child widgets in the vertical direction.

This class is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom.

A widget that displays an image.

A widget that insets its child by the given padding.

A widget that centers its child within itself.

A widget that aligns its child within itself and optionally sizes itself based on the child's size.

A widget that imposes additional constraints on its child.

A widget that positions its child according to the child's baseline.

A widget that attempts to size the child to a specific aspect ratio.

A box with a specified size. If given a child, this widget forces its child to have a specific width and/or height (assuming values are permitted by this widget's parent). If either the width or height is null, this widget will size itself to match the child's size in that dimension.

A widget that applies a transformation before painting its child.

Pointers represent raw data about the user’s interaction with the device’s screen. There are four types of pointer events:

• PointerDownEvent The pointer has contacted the screen at a particular location.

• PointerMoveEvent The pointer has moved from one location on the screen to another.

• PointerUpEvent The pointer has stopped contacting the screen.

• PointerCancelEvent Input from this pointer is no longer directed towards this app.

Tap

• onTapDown A pointer that might cause a tap has contacted the screen at a particular location.

• onTapUp A pointer that will trigger a tap has stopped contacting the screen at a particular location.

• onTap A tap has occurred.

• onTapCancel The pointer that previously triggered the onTapDown will not end up causing a tap.

Double tap

• onDoubleTap The user has tapped the screen at the same location twice in quick succession.

Long press

• onLongPress A pointer has remained in contact with the screen at the same location for a long period of time.

Vertical drag

• onVerticalDragStart A pointer has contacted the screen and might begin to move vertically.

• onVerticalDragUpdate A pointer that is in contact with the screen and moving vertically has moved in the vertical direction.

• onVerticalDragEnd A pointer that was previously in contact with the screen and moving vertically is no longer in contact with the screen and was moving at a specific velocity when it stopped contacting the screen.

Horizontal drag

• onHorizontalDragStart A pointer has contacted the screen and might begin to move horizontally.

• onHorizontalDragUpdate A pointer that is in contact with the screen and moving horizontally has moved in the horizontal direction.

• onHorizontalDragEnd A pointer that was previously in contact with the screen and moving horizontally is no longer in contact with the screen and was moving at a specific velocity when it stopped contacting the screen.

Pan

• onPanStart A pointer has contacted the screen and might begin to move horizontally or vertically. This callback causes a crash if onHorizontalDragStart or onVerticalDragStart is set.

• onPanUpdateA pointer that is in contact with the screen and is moving in the vertical or horizontal direction. This callback causes a crash if onHorizontalDragUpdate or onVerticalDragUpdate is set.

• onPanEnd A pointer that was previously in contact with screen is no longer in contact with the screen and is moving at a specific velocity when it stopped contacting the screen. This callback causes a crash if onHorizontalDragEnd or onVerticalDragEnd is set.

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

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

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. The BottomNavigationBar widget implements this component.

A page view that displays the widget which corresponds to the currently selected tab. Typically used in conjunction with a TabBar.

A Material Design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application.

A material design app bar that integrates with a CustomScrollView.

A flat button is a section printed on a Material Components widget that reacts to touches by filling with color.

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

Shows the currently selected item and an arrow that opens a menu for selecting another item.

Touching a text field places the cursor and displays the keyboard. The TextField widget implements this component.

Checkboxes allow the user to select multiple options from a set. The Checkbox widget implements this component.

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

Displays a menu when pressed and calls onSelected when the menu is dismissed because an item was selected.

An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink).

A horizontal arrangement of buttons.

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.

On/off switches toggle the state of a single settings option. The Switch widget implements this component.

Sliders let users select from a range of values by moving the slider thumb.

Date pickers use a dialog window to select a single date on mobile.

Time pickers use a dialog to select a single time (in the hours:minutes format) on mobile.

Simple dialogs can provide additional details or actions about a list item. For example they can display avatars icons clarifying subtext or orthogonal actions (such as adding an account).

Alerts are urgent interruptions requiring acknowledgement that inform the user about a situation. The AlertDialog widget implements this component.

Bottom sheets slide up from the bottom of the screen to reveal more content. You can call showBottomSheet() to implement a persistent bottom sheet or showModalBottomSheet() to implement a modal bottom sheet.

Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.

A lightweight message with an optional action which briefly displays at the bottom of the screen.

Lets setup our project so it can support for Cupertino widgets and components.

An iOS-style modal bottom action sheet to choose an option among many.

An iOS-style activity indicator. Displays a circular 'spinner'.

An iOS-style alert dialog.

An iOS-style button.

Basic iOS style page layout structure. Positions a navigation bar and content on a background.

An iOS-style picker control. Used to select an item in a short list.

Rounded rectangle surface that looks like an iOS popup surface, such as an alert dialog or action sheet.

An iOS-style segmented control. Used to select mutually exclusive options in a horizontal list.

Used to select from a range of values.

An iOS-style switch. Used to toggle the on/off state of a single setting.

An iOS-style top navigation bar. Typically used with CupertinoPageScaffold.

An iOS-style bottom tab bar. Typically used with CupertinoTabScaffold.

Tabbed iOS app structure. Positions a tab bar on top of tabs of content.

An iOS-style text field.

A Material Design icon.

A Material Design chip. Chips represent complex entities in small blocks, such as a contact.

Tooltips provide text labels that help explain the function of a button or other user interface action. Wrap the button in a Tooltip widget to show a label when the widget long pressed (or when the user takes some other appropriate action).

Data tables display sets of raw data. They usually appear in desktop enterprise products. The DataTable widget implements this component.

A Material Design card. A card has slightly rounded corners and a shadow.

A material design linear progress indicator, also known as a progress bar.

A material design circular progress indicator, which spins to indicate that the application is busy.

A grid list consists of a repeated pattern of cells arrayed in a vertical and horizontal layout. The GridView widget implements this component.

A single fixed-height row that typically contains some text as well as a leading or trailing icon.

A Material Design stepper widget that displays progress through a sequence of steps.

A one logical pixel thick horizontal line, with padding on either side.

You control how a row or column aligns its children using the mainAxisAlignment and crossAxisAlignment properties. For a row, the main axis runs horizontally and the cross axis runs vertically. For a column, the main axis runs vertically and the cross axis runs horizontally.

When a layout is too large to fit a device, a yellow and black striped pattern appears along the affected edge.

By default, a row or column occupies as much space along its main axis as possible, but if you want to pack the children closely together, set its mainAxisSize to MainAxisSize.min. The following example uses this property to pack the star icons together.

The layout framework allows you to nest rows and columns inside of rows and columns as deeply as you need.

Learn how to modify existing widgets and elements with new content.

Most apps contain several screens for displaying different types of information. For example, an app might have a screen that displays products. Users can then tap the image of a product to get more detailed information on a new screen.

You can separate each screen into individual files which are much easier to maintain.

Oftentimes, we not only want to navigate to a new screen, but also pass some data to the screen as well. For example, we often want to pass information about the item we tapped on.

Remember: Screens are Just Widgets™. In this example, we’ll create a List of Todos. When a todo is tapped on, we’ll navigate to a new screen (Widget) that displays information about the todo.

In some cases, we might want to return data from a new screen. For example, say we push a new screen that presents two options to a user. When the user taps on an option, we’ll want to inform our first screen of the user’s selection so it can act on that information!

In the Navigate to a new screen and back recipe, we learned how to Navigate to a new screen by creating a new route and pushing it to the Navigator.

However, if we need to navigate to the same screen in many parts of our apps, this can result in code duplication. In these cases, it can be handy to define a “named route,” and use the named route for Navigation.

To work with named routes, we can use the Navigator.pushNamed function. This example will replicate the functionality from the original recipe, demonstrating how to use named routes instead.

It’s often helpful to guide users through our apps as they navigate from screen to screen. A common technique to lead users through an app is to animate a Widget from one screen to the next.

Stateful and stateless widgets. A widget is either stateful or stateless. If a widget can change—when a user interacts with it, for example—it's stateful. ... A widget's state is stored in a State object, separating the widget's state from its appearance.

Short for in-betweening. In a tween animation, the beginning and ending points are defined, as well as a timeline, and a curve that defines the timing and speed of the transition. The framework calculates how to transition from the beginning point to the end point.

Animations that are broken into smaller motions, where some of the motion is delayed. The smaller animations may be sequential, or may partially or completely overlap.

Animations can also be reversed/stopped at any moment.

Learn how to call Java code from Dart.

Learn how to send values to Java files.

Learn how to call Kotlin code from Dart.

Learn how to send values to Kotlin files.

Learn how to call Objective-C code from Dart.

Learn how to send values to Objective-C files.

Learn how to call Swift code from Dart.

Learn how to send values to Swift files.