Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Flutter > Mobile UI > Flashcards

Mobile UI Flashcards

1
Q

How does flutter app start?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is Scaffold?

A 
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()
))
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is difference between Class and Properties?

A 
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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is a Child?

A 
Within a Class() we can another Class() as a child, thus resulting in a nested widget setup.
The parent class can govern some properties.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is pubspec.yaml?

A

Define the assets under “assets:” section. Use Pub Get to add new files/assets to be used in the project.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

How to use Images?

A
  1. Define the images in pubspec.yaml
  2. Execute PubGet
  3. Within the executable code, call the assets:
    Center(
    child: Image.asset(“images/test.png”)
    )

OR

Networkimage or Assetimage(“images/test.png”)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is a StatelessWidget?

A

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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

How to change the icons on the App?

A

Android:
/android/app/src/main/res/mipmap*
iOS:
/iOS/Runner/Assets.xcassets/*

Download the archive from appicon.co and replace the corresponding directlories.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Hot Reload vs Hot Restart

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Flutter Widget Catalog.

A

Has all the widgets categorized in terms of function. Good location for browsing through different widgets.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is a Container?

A

Is an element used to maintain layout. Can be used to manipulate how the information is displayed on screen.
Can have 1 child.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is a SafeArea?

A

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")
  )
)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are EdgeInsets?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Where are Column() and Row() used?

A

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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

How is SizedBox() used?

A

For layout arrangement, we can add SizedBox in between other Containers to achieve desired arrangement.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Quick way to add a circular profile photo?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Update Font displayed.

A 
Update pubspec.yaml with:
fonts:
- family: xyz
  fonts:
    - assets: fonts/xyz.ttf
On the Text class modify below as:
TextStyle(fontFamily: "XYZ")
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What is Margin and Padding?

A

Margin - empty space that surronds the element.

Padding - the space between the contents of a container and the boundaries of the container.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

mainAxisAlignment

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

mainAxisSize

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What is a Card?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What is a ListTile?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is Divider?

A 
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
  )
)
24
Q

What is Expanded Class?

A

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.

25
Q

Explain Intention Actions

A

Light Bulb

26
Q

How is FlatButton used?

A

This is deprecated, use TextButton. Its a transparent button.

27
Q

What is VoidCallBack?

A

onPressed (){
print(‘Button got pressed’)
}

Have no parameters and don’t return any data.
Same as anonymous function.

28
Q

What is Flutter Inspector?

A

To check the properties of the drawn image.

29
Q

Example TextButton

A 
child: TextButton(
onPressed: (){
print("Hello world");
},
child: Text(),
),
30
Q

Variables

A

var newVariable = 5;

print(“here is my var: $newVariable”);

31
Q

Statically Typed Language
and
Dynamically Typed Language

A

JS is dynamic

While Dart can be both Dynamic and Static.

32
Q

How to create dynamic data type?

A

dynamic myVariable;
string myVar:
int myVar;

33
Q

Stateful widget?

A

setState()

Upon calling setState() the part of screen receiving changes would be re-drawn.

34
Q

How to use Math function?

A

import ‘dart:math’;

Example:
int myVar;
myVar = Random().nextInt(6) + 1;

35
Q

How to update UI when using stateful widget?

A

Use setState() function to update/refresh the UI components on the screen.

It takes an VoidCallBack/Anonymous function.

e.g.
setState(() {
print('Hello World!')
}
)
36
Q

Where is android code for flutter located?

A

MainActivity.java

This is located in the main/java//

37
Q

How to add launch screen?

A

Add element to the style.xml.
Both Launch Theme and Normal theme are required.

This is located inside the res/values directory.

38
Q

Calling a function in Dart 2.0

A

final myPlayer = AudioCache();

void myPlayer() {
print('Hello');
}

myPlayer();

39
Q

Named Arguments

A 
void greet({String name, String greeting}) {
print('$name $greeting');
}

greet(name:’chini’,greeting:’hello’)

order is no longer important.

40
Q

How to setup a startup screen?

A

dependency:

IntroductionScreen, where we can explain about the product and give some helpful tips.

41
Q

How to display text with different styling?

A

Material app:
RichText
can have children - each having separate TextStyle()

42
Q

How to arrange apps in Rows/Columns in relation to each other?

A

Flexible.

Row(
children: [
Flexible(flex: 1, child: Container(…),),
Flexible(flex: 1, child: Container(…),),
Flexible(flex: 1, child: Container(…),)
]
)

43
Q

How to give an element all the space that is left over by another element?

A

Expanded

Row(
children: [
Expanded( child: Container(..),),
Expanded( child: Container(..),),
SizedBox(width: 20.0)
]
)
44
Q

How to manage elements if they are running out of the screen space.

A

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(...),
]
)
45
Q

If an Image/element doesnt fit into another Widget, what can be done.

A

FittedBox

Container(
height: 100,
width: 200,
color: Colors.Red
child: FittedBox(
fit: BoxFit.fill
child: Image.Asset('images/image.png')
)
)
46
Q

How to display a temporary logo when the app starts?

A

dependencies:

flutter_native_splash

47
Q

What is a SnackBar

A

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.

48
Q

How to make an element visible or disappear?

A

Visibility Class give us this functionality.

49
Q

What is spread operator?

A 
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]

50
Q

How to let contents of body go beyind the app bar?

A

On Scaffold, use extendBody, and extendBodyBehindAppBar

51
Q

How to round of the corners of a square picture?

A

ClipRRect

ClipRRect(
child: Image.Asset(‘images/image.png’)
)

Similarly, Clip Oval , ClipPath widgets are also there.

52
Q

What is SilverAppBar

A

AppBar that can change its shape and behaviour. Looks great when scrolling.

53
Q

How to show a wait cursor/busy icon when an element or content is loading?

A

FutureBuilder

54
Q

How to use elements specific to iOS

A

Cupertino

55
Q

How to check the platform?

A 
If below elements return true:
Platform.isAndroid
Platform.isFuchsia
Platform.isIOS
Platform.isLinux
Platform.isMacOS
Platform.isWindows
56
Q

Where to use MediaQuery?

A

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.

Flutter (1 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions