Skip to content
 
 

Latest commit

 

History

3 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 

Repository files navigation

Building a User Interface (UI) using Widgets

In this project, the goal is to design a user interface (UI) using Flutter Widgets without involving any business logic or interactivity. The focus will be on mastering the essential layout and design techniques.


1. Core Objective: Displaying and Structuring the UI

Goal: Learn to create a clean, functional UI using the basic Flutter Widgets.

Key Concepts:

  • Widgets: Basic building blocks for designing the UI in Flutter.
  • Layout: Organize elements properly using Flutter’s layout widgets.

2. Specific Learning Objectives

2.1 Using Image.network

Objective: Learn how to load and display an image from the internet inside the application.

Widget: Image.network

2.2 Core Widgets for UI Construction

  • Image: Display a profile picture or any image.
  • Text: Show descriptive text in English.
  • Column: Arrange elements vertically.
  • Row: Arrange text and icons horizontally.
  • ElevatedButton.icon: Create a button with an icon and text (without adding interactivity).

2.3 Organizing the Layout and Structure

  • Padding: Add spacing around widgets to improve layout.
  • SizedBox: Control space between elements.
  • Center: Center align widgets within the screen.

2.4 Overall Screen Structure

  • Main File
  • Main Method
  • runApp
  • MaterialApp
  • File Screen
  • Scaffold: Build the basic structure of the app (with AppBar, Body, and more).
  • AppBar: Include a navigation bar at the top.
  • Body: Organize the main content area using Column and Row.

3. Project Design

IMG_8133

3.1 The Challenge

  • The task is to design a complete user interface using the listed Widgets.
  • Focus on creating an attractive and organized UI layout, similar to the sample design or better.

3.2 Tools Required

Widgets to Use:

  • Image
  • Text
  • Column
  • Row
  • ElevatedButton
  • Icon
  • Scaffold
  • AppBar

4. Submission Guidelines

  • Deliverables: Submit your app with the complete code.
  • Deadline: 27/5/2025 10:00 AM

5. Design Tips

  • Ensure the interface is clean, organized, and user-friendly.
  • Pay attention to layout consistency.
  • Follow best practices in UI design to enhance the user experience.

Image URL

https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors