Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Flutter application ui design with getX
Rating: 5.0 out of 5(1 rating)
19 students

Flutter application ui design with getX

Learn beautiful login, signup and profile screen for applications
Created bySag Skills
Last updated 8/2022
English

What you'll learn

  • Latest UI design for login and signup
  • UI design for profile with flutter
  • Route with getX
  • animated text kit in flutter

Course content

1 section21 lectures3h 52m total length
  • Creating project6:44

    Create a Flutter project and design a welcome interface with login and register flows using GetX, including gradient visuals, form fields, social login icons, and navigation between screens.

  • Designing welcome screen10:54

    Design a welcome screen for a Flutter app using GetX, add Google fonts and GetX dependencies, and outline the login and sign-up flow with a themed layout.

  • Designing welcome part II11:24

    Add images as assets, center them, and position top and bottom elements using column layouts, while styling text with a Google font and white color.

  • Designing welcome screen part III13:25

    Design and test a Flutter welcome screen by building a gradient elevated login button inside a styled container, applying margins, alignment, and text styles, and preparing navigation.

  • Designing Login screen13:37

    Design the login screen in a Flutter app, transitioning from the welcome screen to a centered login view with image placement and labeled text and buttons.

  • Designing Login Screen part II11:26

    Continue the login screen part ii by adding email and password fields and a login button, with vertical layout and centered alignment for a polished Flutter UI.

  • Design login screen part III8:40

    Continue designing the login screen in flutter with getX by adding a styled elevated login button, refining spacing, alignment, size, gradient and borders, and testing the UI in the app.

  • Design Signup screen10:32

    Design signup screen for Flutter app using GetX, adding a text button for users who are not registered to navigate to sign up, with a clean, aligned layout.

  • Design signup screen part II11:03

    Design a Flutter signup screen UI by implementing fields for name, email, phone, and password with containers, borders, and spacing. Prepare for future login options such as Google and Facebook.

  • Designing signup screen part III13:30

    Design and implement a Flutter signup screen with a sign up button, login option, and social sign-in via Google and Facebook, styled with containers, gradients, and icons.

  • Completing signup screen8:44

    Complete the signup screen by adding a login prompt, proper padding, a Google sign‑in option, and Rubik font styling to create a clean, mobile‑friendly Flutter UI.

  • Adding routes6:51

    Set up routes to navigate between welcome, login, sign up, and home screens, guiding login and sign up flows with text and elevated buttons.

  • Designing home screen6:22

    Design the home screen of a flutter app by creating a stateless widget, wiring image assets, and arranging top and bottom images in a colored container.

  • Designing home screen part II9:46

    Design a Flutter home screen with GetX, applying center alignments, containers, and sizing boxes, featuring font size 26, letter spacing 1, and color changes for hot reload UI testing.

  • Designing home screen part III14:21

    Design the Flutter home screen by composing containers with margins, borders, colors, and shadows to display team member images in two rows, where tapping an image reveals a member profile.

  • Designing profile screen13:42

    Design and implement a profile screen in a Flutter app, featuring a large circular profile image, a fullscreen background image, and interactive details revealed when tapping the image.

  • Designing profile screen part II19:20

    Learn to enhance a Flutter profile screen by integrating animated text, custom fonts, and a developer info section with an image, using animated_text_kit, Google fonts, and Font Awesome dependencies.

  • Designing profile screen part III7:29

    Design the profile screen by wrapping text in a column and aligning elements for a clean layout, with a button and animated text to illustrate UI refinements.

  • Desining another profile screen7:25

    Design and implement a second developer profile screen in Flutter with getX, reusing the layout to display Lexi's profile, updating name, profession, country, and image while preserving background and interactions.

  • Designing profile screen for all member11:53

    Design a multi-profile screen by creating and customizing profiles for Jenny, Tony, and others, adjusting names and images across mobile and web in a Flutter app.

  • Setting routes of screens15:30

    Set up and wire routes for flutter ui screens with getx, from the welcome screen to home, sign up, login, and profile pages, testing navigation and back behavior.

Requirements

  • English language
  • Have a laptop or computer desktop
  • basic knowledge of flutter

Description

This course is about to UI design in flutter in this course you can learn how we design login and signup screen as well profile screens, in this course we are using animated text kit and google font also by adding dependencies. This is a great course for those who want to learn UI widgets and getx transition and route system, this course has total 21 videos. In this course we are using background images which we will provide in resource, this course about to design and using getX material for routing and for transition effect. This course is about flutter widgets and widgets tree structure, as flutter is a frame work depend on its widgets every thing are widgets in flutter, means a block of code, This course is great if you want to learn designing in flutter, This course is about modern design of login and signup and as well as profiles screens , in this course we are adding a section of team member where we added images and when user will tap on image so we are sending user to that particular profile screen, In this course we have added Icon also for going back to previous screen. this is great course forever.

Who this course is for:

  • Who want to learn UI design with Flutter