Scribd
Upload
4 views

Assignment 5

The assignment focuses on exploring and implementing common Flutter widgets, including buttons, images, text styling, and layouts, with code examples and screenshots. It requires the creation of a splash screen with an animation and a home screen based on a provided Figma design. Submission includes a zipped folder of files, a document explaining the implementation, and screenshots of the app in use, ensuring the app is error-free and responsive.

Uploaded by

wfarouk
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

Assignment 5

The assignment focuses on exploring and implementing common Flutter widgets, including buttons, images, text styling, and layouts, with code examples and screenshots. It requires the creation of a splash screen with an animation and a home screen based on a provided Figma design. Submission includes a zipped folder of files, a document explaining the implementation, and screenshots of the app in use, ensuring the app is error-free and responsive.

Uploaded by

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

Flutter Component Exploration and UI Implementation Assignment

Objective:
To explore and understand common Flutter widgets such as Buttons, Images, and Style
Widgets. Additionally, implement a splash screen and a home screen based on the provided
Figma design

Assignment Tasks

1. Component Exploration

 Research the following Flutter widgets and provide a brief explanation of their
usage, with code examples:

1. Buttons: ElevatedButton, TextButton, IconButton.

2. Images: AssetImage, NetworkImage.

3. Text Styling: Text widget with various styles using TextStyle.

4. Containers: Customization with padding, margin, and borders.

5. Layouts: Row, Column, Stack, and ListView.

 For each component, create a small Dart program that demonstrates its usage.
Include screenshots of the output.

2. UI Implementation

Using the provided Figma design as a reference, implement the following screens:

Splash Screen

 Display an introductory screen with an animated logo or a fade-in effect.

 Use a timer or animation to navigate to the home screen after 3 seconds.

Home Screen

 Implement a screen layout that resembles the Figma design. This may include:

o A top app bar with a title or navigation icon.

o A grid or list layout for displaying items.

o Interactive buttons or icons for user actions.

o Use appropriate colors, fonts, and styling based on the design.


Guidelines

1. Ensure that the UI is responsive and adapts well to different screen sizes.

2. Use proper naming conventions for widgets and variables.

3. Organize code into separate files for better readability (e.g., separate files for splash
screen and home screen).

4. Comment your code to explain the logic and implementation.

Submission Requirements

1. Submit the following:

o A zipped folder containing the dart files,assets,pubsbec.yaml.

o A short document or PDF explaining the implementation.

o Screenshots of the app running in an emulator or device.

2. Ensure the app is free of runtime errors.

You might also like