Full-Stack Mobile Development: Flutter, Figma, and Firebase

Design a complete user sign up screen in Figma, from framing an iPhone canvas to crafting header text, input fields with icons, and a gradient signup button with layered shapes.

Learn to design a vendor registration screen in figma by creating frames, selecting colors, styling text fields and icons, aligning elements, and building a complete sign-up page.

Design the header of a home page in Figma, building a background, circular accents, a rounded search bar, with icons. Also prepare for the next sections like the carousel.

Design a carousel image in Figma by importing a banner from Freepik, applying rounded corners, creating four indicator dots, and centering the carousel on the canvas with a highlighted color.

Design the category section of the home page, creating category cards with icons and colors, then align, group, and size elements for a clean layout.

Design a popular product segment in Figma by building a product card with image, rating, sold, and price, using text styling, alignment, and rounded backgrounds for transparent images.

Design a recommended for you product card in Figma, detailing typography, icons, layout, color, alignment, and creating a reusable, exportable product card component.

Design a bottom navigation bar in Figma by creating a white rectangle, sizing icons to 31, and aligning home, favorite, and profile labels.

Design a curved cart screen in Figma by building a header, gradient shapes, and a product card with plus minus controls, store details, and a checkout layout.

Design a vendor profile screen in Figma by building a header, upload products button, and an order summary with frames, ellipses, gradients, and a circular profile image with balance text.

Finish the vendor profile screen in Figma by creating an upload product button, adding an order summary with total orders and alignment of grouped elements.

Design a user profile screen in figma by building a frame, importing icons, and layering shapes, gradients, and a background for a polished user interface.

Complete header by adding and sizing icons (backspace and messenger) with outline stroke, then align elements. Create a notification badge showing three messages with a circle, fill, and white stroke.

Design the user profile screen, turning the image into a circular avatar with a gradient outline, adding an edit icon, location text, and hexagonal icon cards in Plateau font.

design a product detail screen in Figma, featuring a header with back and favorite icons, a product image, name, company, ratings, price, size, quantity, add to cart, and bottom navigation.

Design the product details screen by adding hoodie title, unisex label, star rating, price, size options (S, M, L, XL), and an add to cart button.

Design a header in Figma using the frame tool to build a header frame, search bar, and icons with gradients and precise alignment.

Create a flutter project for an e-commerce app with a web admin panel, navigate directories, run flutter create, name the project, then open it in VS Code to begin development.

Introduce mvc structure in flutter projects, organizing models, views, controllers in lib with models for full name, username, product name, price fields, and views and controllers for screens and login.

Create an assets folder with icons and images, update the post back yaml file to include these assets, and rebuild the app to load the icons and images in Flutter.

Learn to add the Google Fonts package from pub.dev, copy the code into the yaml file, then stop the app and rebuild from the ground up to apply changes.