AppBrewery - The Complete Flutter Development Bootcamp Using Dart Flashcards
Scaffold
blank screen for app;
implements the basic material design visual layout structure.
This class provides APIs for showing drawers, snack bars, and bottom sheets.
-appbar
-body
-drawer
-navigation
-floatingActionButton
use it to place common items on your screen
Column, Row
A widget that displays its children in a vertical, horizontal array.
NetworkImage
get image from internet, typically provide as source Image(), using ‘’ url
The image will be cached.
codesigning iOS
sign app build with certificate from Apple.
ensures source of app, for security.
enables installation, App Store, etc.
MaterialApp
app of Material design
typically root widget
An application that uses material design.
home property is the widget for the default route of the app.
A convenience widget that wraps a number of widgets that are commonly required for material design applications.
It builds upon a WidgetsApp by adding material-design specific functionality.
MaterialApp props
home: where our app starts
app starting point
in main.dart, start at void main()
AppBar
bar at top of app
title, actions, ThemeIcon, etc.
can put in scaffold’s appbar prop
Image, widget
widget to contain an image, a portrait, with an image property to set
for strings, ‘ or “ ?
’ in Dart
runApp()
Inflate the given widget and attach it to the screen.
pubspec.yaml
configuration file;
inform app of assets here
how to add an asset
- folder for asset type (e.g. images), with asset, in root of project
- in pubspec.yaml, add asset to flutter;
~~~
flutter:
assets:
-
how to use image asset
AssetImage(‘’)
site for generating app icons
appicon.co
where to put app icons in Flutter
go to ios and android assets;
android->app->src->main->res folder, replace mipmaps
ios->Runner->Assets.xcassets; replace Assets.xcassets
hot reload updates
stateless and stateful widgets
shortcut for statetless widget
type stless
build method
comes with stateless widget, gets called whenever we create a new version of this widget
hot restart
R; hot reload + state reset
container widget
one of the most fundamental widgets to layout apps
container
analagous to View, Div
A convenience widget that combines common painting, positioning, and sizing widgets
container dimensions rules
Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children. The width, height, and constraints arguments to the constructor override this.
safe area widget
container kept within bezels, notch of iPhone
safe area widget
container kept within usable area on screen; per OS
A widget that insets its child by sufficient padding to avoid intrusions by the operating system.
container margin
Empty space to surround the decoration and child.
margin specified by
EdgeInsets.<>; .all : same all around .symmetric : top&bot same, l&r same .fromLTRB : custom each .only : only set margin for these
padding
space inside of widget
Column props
PROPERTIES
children
crossAxisAlignment: layout along second axis (align to each other; would align them to the rightmost edge of the widest child. stretches along 2nd.
direction
hashCode
key
mainAxisAlignment : layout along main axis, default start. MainAxisAlignment.
mainAxisSize: MainAxisSize. runtimeType textBaseline textDirection verticalDirection: top to bot or bot to top; def. top2bot
column accepts children in
a widget array
By default, column takes up
all of available vertical space, but horizontally limits itself to its children
Opacity()
A widget that makes its child partially transparent.
CircleAvatar
circle that represents a user
Text() props
first is string, unnamed prop.
other is Style
where to get fonts
fonts.google.com
where to store fonts in app
in root, directory fonts
where font documentation
using custom fonts flutter
specify font family with
in TextStyle, family: ‘’
how to add fonts to resources
pubspec.yaml; cannot add like `images/`, but must include exact path to font
fonts:
- family: Pacifico
fonts:
- asset: fonts/Pacifico-Regular.ttf
~~~
~~~
Icon vs Image
icon is drawn, image is shown.
this allows icon properties to be changes on the fly.
icons are vectors, image not
Icons come from where
material package
material icon sites
Flutter icons, material icons https://material.io/tools/icons/?style=baseline, & materialpalette.com
code to add icon
Icon(
Icons.
)
Card widget
A material design card. A card has slightly rounded corners and a shadow.
A card is a sheet of Material used to represent some related information, for example an album, a geographical location, a meal, contact details, etc.
cards accept padding prop, true or false
false
cards accept margin prop, true or false
true
cards accept children or child
child
Padding widget
A widget that insets its child by the given padding.
Use over container with padding just for exact clarity
ListTile
A single fixed-height row that typically contains some text as well as a leading or trailing icon.
A list tile contains one to three lines of text optionally flanked by icons or other widgets, such as check boxes. The icons (or other widgets) for the tile are defined with the leading and trailing parameters.
The heights of the leading and trailing widgets are constrained according to the Material spec. An exception is made for one-line ListTiles for accessibility. Please see the example below to see how to adhere to both Material spec and accessibility requirements.
Note that leading and trailing widgets can expand as far as they wish horizontally, so ensure that they are properly constrained.
List tiles are typically used in ListViews, or arranged in Columns in Drawers and Cards.
contentPadding dense enabled isThreeLine leading onLongPress onTap selected subtitle title trailing
Card default color
white
Divider
a 1-pixel thick horizontal line
