برمجة تطبيق موبايل متجر الكترونيات كامل مع فلاتر خطوة بخطوة - Electrical store mobile app - Flutter

Introduction to the Application Development

Overview of the Project

• The application will consist of two main pages: a main page displaying all devices and a second page providing detailed information about each product.

• The video aims to cover essential concepts, revisiting previously learned material while introducing new topics in detail.

Initial Setup

• Viewers are encouraged to provide feedback in the comments and subscribe for updates on future videos. A note is made that the tutorial is being conducted on a MacBook, but steps will be similar for Windows users.

• The project named store_app is created as the first step in developing the application.

Building the Application Structure

Setting Up Resources

• Preparation begins with setting up images needed for the app by creating an images folder within which all relevant images will be stored.

• A new file named constant.dart is created within a lib folder to store color constants used throughout the application, simplifying color management.

Product Class Creation

• A new folder called models is established where a file named products.dart will define a class for products, including variables like title, subtitle, image, and description. This structure aids in organizing product data effectively.

Developing User Interface Components

Home Screen Configuration

• The constructor for using variables within the app's UI components is set up next, followed by copying code that defines attributes for each product such as ID and price.

• The main file (main.dart) undergoes modifications to remove unnecessary comments and classes while renaming it to reflect its purpose better (e.g., changing it to "Electrical Store").

Creating Screens

• A new folder named screens is created where files corresponding to different screens of the app will reside; starting with defining a home screen in home_screen.dart.

Implementing Design Elements

Importing Material Design Components

• Essential imports from Flutter's material library are added at the beginning of each screen file to utilize various widgets available in Flutter’s framework effectively.

Customizing Appearance

• An Arabic font package (Google Fonts) is integrated into the project alongside basic colors defined earlier; this enhances visual appeal and ensures compatibility with Arabic text display requirements.

Finalizing Layout and Functionality

Container Setup

• Work begins on routing containers within screens; adjustments are made so that when updated, changes reflect correctly on mobile displays (notably ensuring background colors align with design choices). ( t =450 s )

Localization Support

• To support right-to-left text direction suitable for Arabic language applications, localization features are implemented using Flutter's localization capabilities which help adjust layout accordingly.

Conclusion of Initial Setup Steps

Final Adjustments

• Additional properties such as action icons are introduced into navigation menus while ensuring they remain functional even if currently empty or unpopulated with content.

• Separate methods are created for managing specific UI elements like home bars which streamline code organization further enhancing maintainability moving forward.

Building a Container with Stack in Flutter

Using Stack for Layering Widgets

• The discussion begins with the use of a Stack widget to layer multiple elements on top of each other, starting with a Container as the first element.

Customizing Background and Borders

• A Decoration Property is utilized to change the background color to white.

• Border Radius property is applied to create rounded corners, specifically at the top left corner.

Setting Dimensions and Margins

• The height is set to 40 pixels for both the container and its top margin.

• The layout includes spacing using boxes, indicating a structured approach to design.

Padding and Color Adjustments

• Default padding of 10 pixels is mentioned, which helps maintain consistent spacing around elements.

• A larger container will be created inside the stack with specific dimensions and a green color for visibility.

Creating Nested Containers

Designing Inner Containers

• The inner container will be shorter than the main container's height.

• Rounded corners are again emphasized using border radius properties.

Visual Enhancements

• An emphasis on using red color for better visibility within nested containers.

Aligning Containers and Adding Shadows

Positioning Elements

• The outer box is aligned downwards using alignment properties, allowing it to sit lower on the screen.

Shadow Effects

• Box shadow properties are introduced to enhance visual depth by adding light shadows around boxes.

Structuring Product Cards

Image Placement in Containers

• A new container will hold an image, utilizing padding for proper spacing around it.

Defining Dimensions for Images

• Height (160 pixels) and width (200 pixels), are specified for image containers.

Adding Product Details

Incorporating Text Elements

• The next section focuses on adding product titles and prices beneath images within their respective containers.

Dynamic Sizing Based on Screen Width

• Media queries are used to adjust sizes dynamically based on screen width minus fixed values (e.g., 200 pixels).

Text Styling

• Style properties are employed to modify text appearance, including font changes through style property adjustments.

Finalizing Layout Adjustments

Customization Options

• Users can customize designs according to their preferences while ensuring that only three products display at once in the main view.

Implementing New Files

• New files such as Product_card.dart are created alongside necessary imports from material libraries.

Managing Product Lists

• Products must be referenced correctly from lists while ensuring that all variables defined earlier remain accessible throughout development.

Product Detail Screen Development

Opening the Detail Screen

• The user will open the product detail screen when selecting a product, utilizing a navigator for this transition.

Background and UI Adjustments

• The initial background color of the page is set to black; it will be changed to white later. A light cream color will be used for the background of specific elements, and an icon representing a back arrow will be added.

• Padding is applied only to the right side of certain elements for better alignment.

Navigation Functionality

• A button is implemented that allows users to return to the main page using navigator.pop(). This enhances user navigation experience within the app.

Text Styling and Layout

• The text style will change after setting up its properties, with a new font type designated as "body text 2." Centering properties are also adjusted to align text correctly on the right side. Shadow effects are removed from certain elements for clarity.

• A method named DTAS is created for updating details in a structured manner, ensuring efficient data management within the application.

Container Setup and Design Elements

• A container element is initiated with an initial height of 300 pixels, applying box decoration properties such as color and border radius specifically at bottom left corners for design aesthetics.

• Media queries are utilized to ensure responsiveness across different mobile device sizes by adjusting width percentages accordingly. This ensures optimal display on various screens without compromising layout integrity.

Image Handling and Color Selection

Image Integration

• An image path is established from local resources, with dimensions set at approximately 75% of its background size, ensuring it fits well within its designated area without overflow issues. Additionally, adjustments are made to prevent any image size-related problems through proper property settings.

Color Dot Implementation

• Variables are introduced for managing colors effectively; these include fill colors and border selections based on user interactions (e.g., selection states). This dynamic approach allows visual feedback based on user choices during interaction with product options like colors or styles.

Finalizing Product Details Display

Product Title Configuration

• The title "Wireless Headphones" is centered at the top of the detail screen using appropriate styling properties (e.g., headline size) while ensuring all elements align properly within their containers for aesthetic appeal and readability across devices. This enhances overall user engagement with product information presented clearly and attractively.

Application Design and Development Process

Initial Setup and Configuration

• The design process begins with placing elements inside a container.

• The addition of specific properties is planned, including the integration of two flags within the property settings.

• Pricing information will be incorporated into the text widget for display purposes.

Adjustments and Customizations

• An initial price will be set, with plans to modify it later as needed.

• Changes to styles are discussed, specifically replacing existing curtains with new ones in the property settings.

• There will be adjustments made to dimensions for better layout management.

User Interface Enhancements

• Color changes are planned, along with user interface updates on mobile devices.

• User interactions will be enhanced by placing features at the end of a designated box.

Layout and Spacing Considerations

• A spacing adjustment of 20 pixels is proposed for improved visual appeal.

• The right margin space will be increased to enhance layout balance.

Content Addition and Styling

• Instructions are provided for adding product descriptions using a container element.

• A brief introductory text will be written initially as part of the content setup.

Style Modifications

• Style changes include altering background colors and font sizes while ensuring proper margins and padding are applied.

Data Management and Product Integration

• The use of cross-access properties is emphasized for managing data related to products effectively.

• New variables will be created for product management, ensuring that they align with existing structures in the application.

Finalizing Product Details

• Essential product details such as images, titles, prices (with dollar signs), and descriptions must be accurately coded into the system using specified attributes.

Conclusion of Application Design Process

• The session concludes with an overview of completing the application design, which includes a main page displaying all products. Users can click on individual products to view detailed information. Viewers are encouraged to subscribe for future content updates.