Mobile UI Flashcards
How does flutter app start?
The call begins with a main() function, that calls the runApp() function that will run the code within the function on emulator or mobile device.
What is Scaffold?
A Class in Flutter framework that lets us define the App Bar easily. Or a basic visual layout structure. To use: runApp( Scaffold( appBar: AppBar() ))
What is difference between Class and Properties?
Within a Class there are several properties to use.
e.g. calling Scaffold
Scaffold(
appBar: AppBar(
title: Text()
)
)
Here, appBar is property, while AppBar is a class.What is a Child?
Within a Class() we can another Class() as a child, thus resulting in a nested widget setup. The parent class can govern some properties.
What is pubspec.yaml?
Define the assets under “assets:” section. Use Pub Get to add new files/assets to be used in the project.
How to use Images?
- Define the images in pubspec.yaml
- Execute PubGet
- Within the executable code, call the assets:
Center(
child: Image.asset(“images/test.png”)
)
OR
Networkimage or Assetimage(“images/test.png”)
What is a StatelessWidget?
It describes part of the user interface by building a constellation of other widgets.
This part of user interface doesn’t depend on anything outside of the configuration provided within the object.
How to change the icons on the App?
Android:
/android/app/src/main/res/mipmap*
iOS:
/iOS/Runner/Assets.xcassets/*
Download the archive from appicon.co and replace the corresponding directlories.
Hot Reload vs Hot Restart
Flutter lets us use Stateless Widget to be able to use Hot Reload and Hot Restart.
In Hot Reload the state of the application is maintained and when I change something, the change alone is reflected on the app. While in Hot Restart the state of the app will be deleted, and app will start from the initial point.
All the elements within the build function will be re-drawn with Hot Reload and Restart. Anything that is outside of the build function will not update.
Flutter Widget Catalog.
Has all the widgets categorized in terms of function. Good location for browsing through different widgets.
What is a Container?
Is an element used to maintain layout. Can be used to manipulate how the information is displayed on screen.
Can have 1 child.
What is a SafeArea?
When printing elements on the UI, we have to ensure the borders and the notches are not blocking any important information.
To ensure this, we can use SafeArea() to ensure the enclosed elements are not blocked.
e.g.
SafeArea(
child: Container(
child: Text("Hello World")
)
)
What are EdgeInsets?
Used to add boundaries around elements.
Container(
margin: EdgeInsets.Only(left: 30.0)
)
Note: Margin is outside of the widget, and Padding is for the inside of the widget.
Where are Column() and Row() used?
Container() can only have 1 child. Same as Container Column and Row are Layout functionality that let’s us use multiple child elements, which are denoted by ‘children: []’
How is SizedBox() used?
For layout arrangement, we can add SizedBox in between other Containers to achieve desired arrangement.
Quick way to add a circular profile photo?
Use the CircularAvatar() Widget, and use the option backgroundImage:
Note: Image.asset or Image.file will not work as the data type is different.
Networkimage or Assetimage(“images/test.png”) - works
Update Font displayed.
Update pubspec.yaml with:
fonts:
- family: xyz
fonts:
- assets: fonts/xyz.ttf
On the Text class modify below as: TextStyle(fontFamily: "XYZ")
What is Margin and Padding?
Margin - empty space that surronds the element.
Padding - the space between the contents of a container and the boundaries of the container.
mainAxisAlignment
For Rows, how the data is arranged in terms if vertical middle line.
For Columns, how the data is arranged in terms of horizontal middle line.
mainAxisSize
For Rows the size of the container consumes complete row. Defining MainAxixSize.min will reduce the container size to the elements.
Similary for Columns, the size of the Container havng the Column will be the whole column. It can be set to min to just fit the elements or set max to consume whole column.
Note: the size of container increases to consume everything available.
What is a Card?
Instead of creating rows and columns to show some info, we can use Card that will create beautiful looking boxes with shadow to show info.
Note: Card doesnt have padding. So we can have a child called Padding, that has a property padding.
What is a ListTile?
Instead of creating rows and columns to arrange an icon and text, we can create a ListTile, which has a leading elemet and a title.
So for leading we can provide an icon, and for the title we can provide the text.
What is Divider?
It can be used as a separator between contents. Width can be controlled by the Container/SizedBox.
e.g.
SizedBox(
width: 20,
child: Divider(
color: Colors.teal
)
)What is Expanded Class?
A class that expands the child of Row, Column or Flex.
If we use outside that, we will get error.
Note: flex is a property of Explanded that lets the elements share the screen as per the flex ratio.
Should be immediately after a Row/Column. Any more nesting creates error.
Explain Intention Actions
Light Bulb
How is FlatButton used?
This is deprecated, use TextButton. Its a transparent button.
What is VoidCallBack?
onPressed (){
print(‘Button got pressed’)
}
Have no parameters and don’t return any data.
Same as anonymous function.
What is Flutter Inspector?
To check the properties of the drawn image.
Example TextButton
child: TextButton(
onPressed: (){
print("Hello world");
},
child: Text(),
),Variables
var newVariable = 5;
print(“here is my var: $newVariable”);
Statically Typed Language
and
Dynamically Typed Language
JS is dynamic
While Dart can be both Dynamic and Static.
How to create dynamic data type?
dynamic myVariable;
string myVar:
int myVar;
Stateful widget?
setState()
Upon calling setState() the part of screen receiving changes would be re-drawn.
How to use Math function?
import ‘dart:math’;
Example:
int myVar;
myVar = Random().nextInt(6) + 1;
How to update UI when using stateful widget?
Use setState() function to update/refresh the UI components on the screen.
It takes an VoidCallBack/Anonymous function.
e.g.
setState(() {
print('Hello World!')
}
)
Where is android code for flutter located?
MainActivity.java
This is located in the main/java//
How to add launch screen?
Add element to the style.xml.
Both Launch Theme and Normal theme are required.
This is located inside the res/values directory.
Calling a function in Dart 2.0
final myPlayer = AudioCache();
void myPlayer() {
print('Hello');
}
myPlayer();
Named Arguments
void greet({String name, String greeting}) {
print('$name $greeting');
}
greet(name:’chini’,greeting:’hello’)
order is no longer important.
How to setup a startup screen?
dependency:
IntroductionScreen, where we can explain about the product and give some helpful tips.
How to display text with different styling?
Material app:
RichText
can have children - each having separate TextStyle()
How to arrange apps in Rows/Columns in relation to each other?
Flexible.
Row(
children: [
Flexible(flex: 1, child: Container(…),),
Flexible(flex: 1, child: Container(…),),
Flexible(flex: 1, child: Container(…),)
]
)
How to give an element all the space that is left over by another element?
Expanded
Row( children: [ Expanded( child: Container(..),), Expanded( child: Container(..),), SizedBox(width: 20.0) ] )
How to manage elements if they are running out of the screen space.
Wrap.
Using wrap we can select a row or column to display the elements on the next line based on the configuration.
Wrap( alignment: WrapAlignment.end spacing: 10.0 children: [ Container(...), Container(...), Container(...), Container(...), ] )
If an Image/element doesnt fit into another Widget, what can be done.
FittedBox
Container(
height: 100,
width: 200,
color: Colors.Red
child: FittedBox(
fit: BoxFit.fill
child: Image.Asset('images/image.png')
)
)
How to display a temporary logo when the app starts?
dependencies:
flutter_native_splash
What is a SnackBar
It is used to display a widget on the bottom of the screen, can be a small tip, or error message. The contents can be a text or icon.
How to make an element visible or disappear?
Visibility Class give us this functionality.
What is spread operator?
var a = [0,1,2,3,4]; var b = [6,7,8,9]; var c = [...a,5,...b];
print(c); // prints: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
How to let contents of body go beyind the app bar?
On Scaffold, use extendBody, and extendBodyBehindAppBar
How to round of the corners of a square picture?
ClipRRect
ClipRRect(
child: Image.Asset(‘images/image.png’)
)
Similarly, Clip Oval , ClipPath widgets are also there.
What is SilverAppBar
AppBar that can change its shape and behaviour. Looks great when scrolling.
How to show a wait cursor/busy icon when an element or content is loading?
FutureBuilder
How to use elements specific to iOS
Cupertino
How to check the platform?
If below elements return true: Platform.isAndroid Platform.isFuchsia Platform.isIOS Platform.isLinux Platform.isMacOS Platform.isWindows
Where to use MediaQuery?
To display the contents based on the users screensize or prefenrences set on phone, the MediaQuery can be called to find certain configurations and draw the app accordingly.
