Figma project - Build a Flutter Chat App: 01 - Design/UI

Unlock Mastery in UI Design: Dive into Apps, Animations, and Advanced Prototyping with Figma! Elevate your skills from beginner to pro and bring your creative visions to life with interactive and responsive design techniques.

5.0 (1)

21 learners

What you'll learn

Design user-friendly UI layouts using Figma for various types of apps
Create interactive prototypes and animations to enhance user experience
Implement advanced design techniques like auto-layouts and responsive components
Utilize design systems and developer handoff processes efficiently in UI/UX projects

This course includes

38.3 hours of video
Certificate of completion
Access on mobile and TV

Summary

Keywords

Flutter Tutorial Flutter Tutotial Flutter Apps Flutter chat app chat stream Flutter stream building a chat app in Flutter Custom chat app Flutter messaging flutter message application

Full Transcript

In this beginner friendly video series we will create a Flutter chat application from scratch. In this video we focus on the design of our application, building the UI, and laying down a foundation. In the next video we'll connect to our https://getstream.io/ API. Source code and instructions: https://github.com/HayesGordon/chatter Stream Flutter Tutorial: https://gstrm.io/getting-started-flutter Gordon's Twitter: https://twitter.com/gordonphayes Stream's Twitter: https://twitter.com/getstream_io Series Playlist: https://www.youtube.com/playlist?list=PLNBhvhkAJG6sH7dkmwt4BiCclFkMoXq4r --- Timestamps: 0:00 Intro 2:20 Installation, setup and themes 9:12 Home screen 13:50 Google fonts 16:30 Dark mode 18:20 Bottom navigation bar 44:34 ValueNotifier and ValueListenableBuilder 49:00 Opaque HitTestBehaviour 55:42 AppBar 01:01:08 Avatar 01:08:47 Custom icon button 01:15:37 Stories ListView.builder 01:29:18 CustomScrollView and SliverList 01:33:14 Message tile and data 01:46:45 UI touch ups 01:52:45 Glowing action button 02:00:08 ChatScreen navigation 02:03:53 ChatScreen UI 02:18:00 Closing ---

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

Flutter - MySQL Database, API with PHP

Master Flutter & MySQL Integration: From APIs to Dynamic UX! Dive into hands-on tutorials and craft seamless database interactions using Flutter, PHP, and MySQL. Elevate your app development skills with Showbilitix's expert guidance today!

⭐ 5.0

2 ratings

6.3 hours

Curso de Templates Flutter - Aplicativos IOS e Android

⭐ 5.0

4 ratings

54 min

Curso COMPLETO de Flutter

Desbrave o Mundo do Desenvolvimento com Flutter: Construa Aplicativos Incríveis de Forma Moderna e Eficiente! Acompanhe o passo a passo desde a criação de projetos até a integração de widgets e melhores práticas de código.

⭐ 4.0

6 ratings

2.3 hours