Flutter UI Coding Course for Designers and Beginners

Install flutter and set up environment, configure flutter bin path, and verify with flutter doctor; code UI apps with Visual Studio Code and test in Chrome or Microsoft Edge.

Set up VS Code for Flutter development by installing Flutter and Dart language support and the Prettier formatter, then enable auto-formatting on save.

Create a flutter project following naming conventions, open the lib folder and main.dart, then run on a device like Chrome using the Dart language with hot reload.

Explore how Flutter apps are structured by examining main.dart, stateless and stateful widgets, and the material app, and learn how properties customize the user interface.

Prepare the base for coding by creating a dedicated home page widget in lib, importing the flutter material package, and establishing a foundation with a simple container.

Build your first Flutter screen with the scaffold as the foundation, set the body to host UI components, center a hello world text, and apply font size 40.

Explore how to use colors in flutter, applying color to text styles and containers, and adjust shades and opacity with HTML color codes for precise UI control.

Set up a custom form by downloading assets, updating the abstract YAML, configuring image parts and spacing, and applying fonts, then set up the homepage for the next lesson.

Apply custom fonts by setting the font family and weight, download fonts from Google's list, save them in a folder, and update the pubspec file.

Learn to handle long text in Flutter by using maxLines and overflow ellipses, then apply padding with edge insets options like all, symmetric, horizontal, and vertical to improve layout.

Explore the rich text widget to display a single line of text in multiple styles by using children with their own text styles, while the parent style provides default styling.

Learn to display images in flutter by loading assets from the images folder with image widget, sizing with width and height, and displaying network images via network or container methods.

Learn to place images in widgets with a container and BoxFit values to fill or fit space. Create round images with a widget and Circle Avatar, and overlay text.

Create a frosted glass effect by applying an image filter to a container with a background image and a backdrop filter using sigmaX and sigmaY. Add padding and SafeArea.

Set up an icon folder and use the Flutter icon widget to display standard icons with configurable size and color; explore third-party font icons from the Google fonts icons page.

Learn to use the font awesome flutter package by adding it to pubspec.yaml, running flutter pub get, importing the package, and displaying icons with Icon(FontAwesome...) in your UI.

Learn to use SVG vector images in Flutter by installing the flutter_svg package, importing it, and displaying scalable icons from the images folder to preserve quality across screen sizes.

Explore the container widget to arrange UI elements in Flutter, fill the screen within a safe area, and position children using alignment, center, and align.

Explore how the column widget arranges widgets vertically in Flutter, using main axis and cross axis alignment, full width with double.infinity, and the Expanded and Flex properties to control space.

Explore how the row widget arranges three containers horizontally, using main axis and cross axis alignment, expanded and flex to allocate space, and wrapping for full screen height.

Extract and reuse a custom widget by moving it to its own file and importing it, while configuring color and flex parameters for multiple instances.

Explore combining row and column widgets to craft complex Flutter layouts. Use cross axis alignment and Expander to maximize space within nested green and blue containers.

Learn to divide the screen with media query by detecting height and width, then distribute space among three containers and enable responsive header, body, and footer.

Demonstrate how the stack widget overlaps its children to create layered layouts with a gray container and a smaller top container. Use the alignment property to center or reposition children.

Learn to use the positioned widget in a stack to place containers with top, left, bottom, and right values, building a full-screen layout with header, menu, and body.

Learn to position widgets with the Align widget by adjusting the alignment property and x, y coordinates, placing elements centrally, at the bottom or top, and overlapping via stack.

Apply a gradient background to the container using the box decoration's linear gradient with two orange tones; adjust the direction with begin, end, and alignment.

Learn to set an image as the background of a container using the decoration image property, with border radius and fit options, and layer other widgets on top.

learn to shape a container into a circle, apply a surrounding border, and add a configurable shadow using box decoration and box shadow properties, including color, blur, radius, and offset.

Learn to build a layered Flutter UI by stacking a gradient over an image background, then arrange text and icons with a column, spacer, and precise alignments.

Learn to build a custom Flutter button using a container, make it clickable with InkWell and ripple effect, and convert it into a reusable widget with gradient.

Create a custom circle button by shaping a container into a circle with width, height, and box decoration, then contain the ripple with the click behavior and click dot.

Design and implement two icon button variations in Flutter, replacing text with icons, arranging icon and label in a column, and refining size, spacing, and border radius.

Learn how to use flutter's text button and other built-in buttons, covering on-press function and child properties, styling with style from, padding, color, and making reusable button widgets.

Learn to implement an outline button by reusing text button code, styling the border with border side, and rounding corners with a rounded rectangle border, then test with a print.

Learn how to convert a text button into an elevated button in Flutter, apply the primary color, elevation, and shadow, and add a linear gradient with a decorated box.

Turn elevated buttons into square and icon variants by updating the child to a column and adding an icon, then build a square button with dynamic icon and label.

Build a screen layout in flutter with a gradient and split foreground, featuring a rounded image on one side and text on the other, using container decoration and gradient stops.

Create two full-screen interfaces with image backgrounds by reusing prepared code, using a foreground container with a column and bottom alignment, and applying a gradient decoration to light the background.

Create a full-screen layout by combining column and row structures, using gradient containers with rounded bottom corners and a top-left menu icon; raise the search field with a transform.

Learn Flutter stack layouts by building a screen with an image background, a gradient overlay, a centered round image, and top and bottom positioned UI components using column and row.

Explore flutter's text field and input decoration, including borders, enabled and focused states, and prefix or suffix icons. Learn to style with outline borders, border radius, and helper text.

Learn how to attach the text field to the child of a container, customize borders and padding, and convert the combination into a reusable custom widget for Flutter UI design.

Create a custom text field widget, integrate it into a row with an expanded container, add padding, and configure keyboard types, prefix tags, and obscured text.

Build a frosted glass text field over an image background in Flutter, using a decorated container with padding, a prefix icon, and long-text support via maxLines and expands.

Learn to build a custom checkbox in Flutter by converting a stateless widget to stateful, wiring a boolean state with onChanged, and adding padding, scale, and ink ripple.

Build radio buttons in Flutter using Dart enums to define choices such as tea and coffee, wire up values and groupValue, and update selection with setState inside a row layout.

Watch a hands-on switch component lesson that mirrors the checkbox widget, focusing on coloring the switch and adding an on tap property to make the entire bar clickable.

Create toggle buttons as a custom Flutter widget, using a boolean selections list to track on/off states and an on press handler, with options defined as a list of widgets.

Explore how to create scrollable vertical lists in Flutter using ListView, build dynamic colored containers from a colors list, and leverage ListView.builder with separators for long lists.

Learn to use ListTile with style to create a clickable Flutter list item, replacing container and divider with size box and configuring title and subtitle.

Learn to populate a ListView using a sample JSON data set, map parsing for name and email, and display user pictures with image.network while applying string interpolation.

Build a ten-item JSON data set, import it as user data into a ListView, and enhance visuals with circle avatars, rounded corners, and bouncing scrolling via a custom widget.