#5 Android Studio - Columns & Rows

Tutorial on how to add multiple widgets using Column and Row functions

We are adding multiple widgets by using the functions Column() or Row(). Inorder to add multiple widgets we have to add a function called children <Widget>[] inside which we can add our multiple containers as shown in the image below.

 Refer #4 Android Studio - Container to learn about containers and how to add them

 

Here in the image below i have given different colors and removed padding and margins to avoid confusions

 
 

Using different functions to re-arrange widgets

1. a)verticalDirection: VerticalDirection.up, is used to arrange the containers in the top

    b)verticalDirection: VerticalDirection.down,  is used to arrange the containers in the bottom


 2. a) mainAxisAlignment: MainAxisAlignment.start, is similar to verticalDirection: VerticalDirection.up as it places the children close to the main Axis ie, the top

     b) mainAxisAlignment: MainAxisAlignment.end, is used to align the containers to the end of the main axis

c) mainAxisAlignment: MainAxisAlignment.centre, is used to align the containers to the centre

 

d) mainAxisAlignment: MainAxisAlignment.spaceEvenly, is used to evenly distribute the containers

  

  e) mainAxisAlignment: MainAxisAlignment.spaceBetween, is used place the 1st container at top, 2nd at middle and 3rd container in bottom.it is used to leave space in between the containers.

 
  
3. mainAxisSize: MainAxixSize.min, is a function used to reduce the area of margin for the container.It can be checked by using the flutter inspector


4.a) crossAxisAlignment: CrossAxisAlignment.start, is a function used when the width of the container are different.Here it makes the containers begin fron the left side.

b) crossAxisAlignment: CrossAxisAlignment.end, Here it makes the containers begin fron the right side.


c) crossAxisAlignment: CrossAxisAlignment.stretch, is used to strentch the whole container


 

5. width: double.infinity, is used to give unlimited length to the container.Here in the image below i have added a invisible container along with the function crossAxisAlignment: CrossAxisAlignment.end, to place all the containers to the end on the invisible container



6. SizedBox() is used to give space in between containers (it is an alternative methord to avoid using margin function)

Study about margin and padding from  #4 Android Studio - Container

You can use the same functions for Row() function


Now try out an assignment to check your knowledge in Containers,Colums and Rows by clicking here

You can refer Flutter Layouts to learn more about Function of Column and Row

Refer these lessons to learn how to add images from google as well as from our device our flutter project #1 Android Studio - Scaffold  ,  #2 Android Studio - Working with Assets 

Refer  #3 Android Studio - Add App Icon to learn about how to add App icon to our project

Refer #4 Android Studio - Container to learn about Containers

 

Refer the course from Udemy : Android Studio

Comments

Post a Comment

Popular posts from this blog

#2 Android Studio - Working with Assets

Image
Tutorial on how to add an image from PC into our App Step 1 : In order to add images from our laptop, we have to create a separate directory in Android Studio to add the image.For this select New - Directory - Type Images and copy the image to the directory 'Images' under your ****_app file . You can download the image using this link : Diamond.png Step 2 : Now open pubspec.yaml file from 'test' and you can see Flutter : assets engraved in green color(commented).Inorder to uncomment select from assets: to .jpeg and press Ctrl + / .Now erase all other comments which are not required(green colored text). Note : In .yaml file we comment using # Make sure your code looks like this and then press pub get dispalyed on the top.   Note : You name,version,environment nad cuprttino_icons values might change prior to the version used Step 3 : Now go back to main.dart and type the code.The only difference from the #1 Android Studio - Scaffold code is that we have chan...
Read more

#1 Android Studio - Scaffold

Image
Tutorial on How to make a simple app using Android Studio (Add Image to an App from google) This is a simple app portraying an image of your choice in which you can change the background color and the App-bar color.The picture used in this code is taken from google using the command 'NetworkImage' . The whole code is placed inside a class for Hot Reload(you need not execute the code every time you change) which helps us to execute the code in an easy way.We are using the command 'Scaffold' for placing the image and app-bar and it is embedded in 'MaterialApp' which is the background widget for placing items. *select the image to increase visibility You can notice all the codes are inside widgets and android studio automatically helps you to program in simple and easy manner.The picture in the right displays the code opened in the emulator. Code : import 'package:flutter/material.dart' ; void main () { runApp( MyApp ()) ; } class MyApp ex...
Read more