Posts

Showing posts from December, 2020

#4 Android Studio - Container

Image
Tutorial on How to add container class and add padding and margin to our Flutter Project Container class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets.In this lesson we will learn about how to add container class to our project and add paddings and margins to the container. Step 1 : Add container widget by typing Container() in body and add a background color and text to make the container visible Step 2 : Add Paddings.Paddings help to re arrange the text inside the container.There are different types of padding eg. EdgeInsets.only(any one direction : 30.0) [single direction] EdgeInsets.all(20.0) [all direction]  EdgeInsets.fromLTRB(left, top, right, bottom) [specific direction] EdgeInsets.Symmetric(horizontal : 5.0, vertical: 2.0) [horizontal & Vertical]   Step 3 : Add Margins.Margin are used to give spacing outside the container and the codes are same as that of padding   Note : Padding is used to give spac...

#3 Android Studio - Add App Icon

Image
 Tutorial on how to change the App icon Step 1 : In order to add the App icon, first download the picture from the link given below and upload it to the App icon generator . Make sure to d ownload and unzip the folder generated from the app generator. Download Image :   Diamond.png Note : Choose only the required app sizes while choosing in the app icon generator   Step 2 : Then open Android studio and open Show In Explorer from Android - app - src - main - and right click on res where you can see the similar folder names of that downloaded from the icon generator (inside Android).Now replace the files of android studio with the downloaded files. Step 3 : Do the same for iOS by opening Show in Explorer from iOS - runner - and right click on Assets.xcassets and replace the corresponding file with the downloaded file.   Step 4 : You can run the app to see the changes you made to the app icon.Here you might have noticed that the android app icons are i...

#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...

#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...