Scribd
Upload
48 views

Report On Flutter Project

The document provides instructions for installing the Flutter SDK and creating a basic Flutter project. Step 1 explains how to download the Flutter SDK from the website. Step 2 tells the user to extract the downloaded Flutter SDK file. Step 3 provides instructions for updating the Windows PowerShell path variable to include Flutter. The remaining steps guide the user on running flutter doctor to confirm a successful installation and resolving any license issues with Android Studio.

Uploaded by

Akhash Aravindh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
48 views

Report On Flutter Project

The document provides instructions for installing the Flutter SDK and creating a basic Flutter project. Step 1 explains how to download the Flutter SDK from the website. Step 2 tells the user to extract the downloaded Flutter SDK file. Step 3 provides instructions for updating the Windows PowerShell path variable to include Flutter. The remaining steps guide the user on running flutter doctor to confirm a successful installation and resolving any license issues with Android Studio.

Uploaded by

Akhash Aravindh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

REPORT ON FLUTTER PROJECT

Installation Process

Step 1: Download Flutter SDK from the wesite


Download the Flutter SDK package by clicking on the following button on the
webpage

Step 2 : Extract the file


Step 3 : Update path variable for windows powershell
Edit environment variables for your account.
Step 4 : Conform the installed tools for running flutter
In CMD, run the flutter doctor  command to confirm the installed tools along
with brief descriptions.

Step 5 : Download and install android studio


Android Studio was successfully installed, however, it finds an issue with
Android licenses. This issue is fairly common and is mitigated by running the
following command in CMD.

flutter doctor --android-licenses

Task:
To make a dynamic Instagram feed by using the data provided in the
json file

1.Create the flutter project in android studio


Create the app

1. Open the IDE and select New Flutter Project.


2. Select Flutter, verify the Flutter SDK path with the SDK’s location.
Then click Next.
3. Enter a project name (for example, my_app).
4. Select Application as the project type. Then click Next.
5. Click Finish.
6. Wait for Android Studio to create the project
2. After creating the app, start coding in the dart language in main.dart file
This is the Instagram clone page made in flutter using dart language
Widgets used for this clone
 Statelesswidget
 Scaffold
 Text
 Container
 Circle avatar
 Column
 Row
 Sizedbox
 Icon
 Listview
 Spacer
 Center
 Image
 Stack

Insta clone step by step:

Scaffold:
 Use the background color to keep the color of the appbar to
be black.
Text:
 Set the title as title which is passed as the parameter to the
Myhomepage

Use the action class for padding the icons favorite_border,send.


For padding,use the edgeinsets : The EdgeInsets class specifies offsets
in terms of visual edges, left, top, right, and bottom.

In the column class,use the crossaxisalignment to arrange the rows


and column.
In the row:
i.Circle avatar
ii.Column:
i.handle
ii.location
iii.icon:more_vert

For the above:


 Padding
 backgroundIamge(networkimage)
 Text,textstyle,color
 Spacer for the space between the icon
 Use the image.network class to fit the image

Use the row class to align the icons such as


favorite_border,messenger_outline,send,bookmark_border_Outlined.
For the above:
 Padding
 Text,textstyle,color
 Spacer for the space between the icon

Use the row class for the images of the insta handles to be set and
use the stack for displaying the images.
For the above:
 Padding
 Circleavatar
 Network Image

Use the container to display the likedby and description:


 Text,Textstyle
 Padding

Use
 Padding
 Spacer
 Text,textstyle,color
 Icon
 Circleavatar
 backgroundImage

You might also like