Super Useful Flutter Layouts - Right in Your Pocket. πŸ˜‰

Overview

Super Useful Flutter Layouts - Right in Your Pocket. πŸ˜‰

Update: Flutter web app preview here: https://flutter-layouts-demo.web.app/

YouTube video walkthroughs with explanations here:

Flutter Layouts: Row, Column, Stack, Expanded, Padding

Flutter Layouts: PageView, ListView, GridView, Slivers, Hero Imaegs

This app shows you how to use the most common layouts in Flutter.

You can run this project on your simulator or device.

Oh, and the app itself is built with - guess what - a combination of Flutter layouts. So Meta! 😎

For more articles and video tutorials, check out Coding With Flutter.

Table of Contents

Row / Column

Baseline

Stack

Expanded

Wikipedia: Golden Spiral (also: Fibonacci, Golden Ratio).

Padding

PageView

ListView

Slivers

Hero Image

Nested Lists

For more articles and video tutorials, check out Code With Andrea.

License: MIT

Attribution

Youtube Play Icon by Youtube Clipart.

Comments
  • can not apply run flutter run

    can not apply run flutter run

    as I did flutter run, I got the following ERROR messages:

    ~/s/f/layout-demo-flutter ξ‚° ξ‚  master  ξ‚° flutter run
    Running "flutter packages get" in layout-demo-flutter...     0.8s
    Launching lib/main.dart on iPhone X in debug mode...
    Starting Xcode build...
    Xcode build done.                                            0.8s
    Failed to build iOS app
    Error output from Xcode build:
    ↳
        ** BUILD FAILED **
    
    Xcode's output:
    ↳
        === BUILD TARGET Runner OF PROJECT Runner WITH CONFIGURATION Debug ===
        Debug.xcconfig line 1: Unable to find included file "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"
        Debug.xcconfig line 1: Unable to find included file "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"
        The use of Swift 3 @objc inference in Swift 4 mode is deprecated. Please address deprecated @objc inference warnings, test your code with β€œUse of deprecated Swift 3 @objc inference” logging enabled, and then disable inference by changing the "Swift 3 @objc Inference" build setting to "Default" for the "Runner" target.
        === BUILD TARGET Runner OF PROJECT Runner WITH CONFIGURATION Debug ===
        diff: /Podfile.lock: No such file or directory
        diff: /Manifest.lock: No such file or directory
        error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.
    Could not build the application for the simulator.
    Error launching application on iPhone X.
    
    opened by vikbert 5
  • Error class HeroHeader

    Error class HeroHeader

    Missing concrete implementation of 'getter SliverPersistentHeaderDelegate.stretchConfiguration'. Try implementing the missing method, or make the class abstract.dart(non_abstract_class_inherits_abstract_member)

    error

    opened by gogreen42 3
  • hero_page.dart fails to run

    hero_page.dart fails to run

    In Android Studio, running everything up to date. Imported all dependencies upon cloning file. The only file with errors that won't run.

    console: `Launching lib/main.dart on iPhone 11 Pro Max in debug mode...

    Compiler message: lib/pages/hero_page.dart:6:7: Error: The non-abstract class 'HeroHeader' is missing implementations for these members:

    • SliverPersistentHeaderDelegate.stretchConfiguration Try to either
    • provide an implementation,
    • inherit an implementation from a superclass or mixin,
    • mark the class as abstract, or
    • provide a 'noSuchMethod' implementation.

    class HeroHeader implements SliverPersistentHeaderDelegate { ^^^^^^^^^^ ../../Developer/flutter/packages/flutter/lib/src/widgets/sliver_persistent_header.dart:80:44: Context: 'SliverPersistentHeaderDelegate.stretchConfiguration' is defined here. OverScrollHeaderStretchConfiguration get stretchConfiguration => null; ^^^^^^^^^^^^^^^^^^^^ Target kernel_snapshot failed: Exception: Errors during snapshot creation: null Failed to build bundle. Error launching application on iPhone 11 Pro Max.`

    opened by PythonCodingUnicorn 2
  • fix compile bug on hero page

    fix compile bug on hero page

    Change HeroHeader implements SliverPersistentHeaderDelegate to HeroHeader extends SliverPersistentHeaderDelegate to fix missing implementation of stretchConfiguration method as it mentioned in this issue https://github.com/bizz84/layout-demo-flutter/issues/9

    opened by ilyaviache 1
  • Hero page error

    Hero page error

    Hi Andrea,

    I don't know what that actually means. I click on all the icons and everything works fine except for the Hero Icon when it suddenly crushes giving an assertion error.

    Exception caught by widgets library ═══════════════════════════════════
    'package:flutter/src/widgets/framework.dart': Failed assertion: line 4377 pos 14: 'owner!._debugCurrentBuildTarget == this': is not true.
    The relevant error-causing widget was
    MainPage
    
    opened by surferus 3
  • Could not build the application for the simulator

    Could not build the application for the simulator

    Below is the error message I received trying to run the app on my ios simulator in android studio. I am new to coding dart and flutter. How do i get this to run? I would like to download this app to my phone also to study on the go. Please help with that also. Thanks in advance

    Launching lib/main.dart on iPhone 11 Pro Max in debug mode... Running Xcode build... Xcode build done. 1.0s Failed to build iOS app Error output from Xcode build: ↳ ** BUILD FAILED **

    Xcode's output: ↳ === BUILD TARGET Runner OF PROJECT Runner WITH CONFIGURATION Debug === Debug.xcconfig line 1: Unable to find included file "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig" Debug.xcconfig line 1: Unable to find included file "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig" The use of Swift 3 @objc inference in Swift 4 mode is deprecated. Please address deprecated @objc inference warnings, test your code with β€œUse of deprecated Swift 3 @objc inference” logging enabled, and then disable inference by changing the "Swift 3 @objc Inference" build setting to "Default" for the "Runner" target. === BUILD TARGET Runner OF PROJECT Runner WITH CONFIGURATION Debug === diff: /Podfile.lock: No such file or directory diff: /Manifest.lock: No such file or directory error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.

    Could not build the application for the simulator. Error launching application on iPhone 11 Pro Max.

    opened by adavis605 4
  • FAILURE: Build failed with an exception

    FAILURE: Build failed with an exception

    
    FAILURE: Build failed with an exception.
    
    * What went wrong:
    Execution failed for task ':app:compileDebugJavaWithJavac'.
    > Could not create service of type GeneralCompileCaches using GradleScopeCompileServices.createGeneralCompileCaches().
    
    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
    
    * Get more help at https://help.gradle.org
    BUILD FAILED in 31s
    Gradle task assembleDebug failed with exit code 1
    Exited (sigterm)
    

    Your code on 'layout-demo-flutter' I have no idea where to start to resolve this... any thoughts??

    opened by ddean6232 3
Owner
Andrea Bizzotto
Flutter GDE ❖ Creator of codewithandrea.com ❖ YouTube: nnbd.me/yt ❖ Complete Dart Course: nnbd.me/dart
Andrea Bizzotto
Additional alignments to help make your layouts more readable (TopLeft, TopRight, etc)

extra alignments Why should Center get all the love? This package adds additional alignments to help make your layouts more readable. The full set inc

gskinner team 13 Jan 6, 2023
Sūpāhīrō is a demo app for the talk/write on super charging your navigation 1.0 in flutter apps

navhero A simple experiment to give nav1.0 super powers. Named routing in Nav 1.0 could get messy, with large router files here and there. This projec

Samuel Abada 9 Dec 3, 2022
Flutter-context-menus - A flutter package to show context menus on right-click or long-press

context_menus A package to show context menus on right-click or long-press. ?? I

null 0 Jan 18, 2022
FLUTTER API: It's powerful navigation by gestures and taps. You can scroll from left to right or tap on the navigation icons.

scroll_navigation My other APIs Video Viewer Video Editor Helpers Features Fancy animations. Customizable colors. Works with the back button. Scrollin

Luis Felipe Murguia Ramos 14 Jun 14, 2022
Do It Right - flutter app, simple android game to Increase Children’s Intention and Behavior About Littering

doitright "DoItRight": An Arabic Flutter Mobile App to Increase Children’s Inten

Yasser Alsleman 0 Jan 23, 2022
This is a mason brick you can use to generate code that get's you started right up with a flutter project

flutter_brick This is a mason brick you can use to generate code that gets you started right up with a flutter project A flutter brick created with th

Bruce Omukoko 3 Sep 16, 2022
Custom bottom bar - A bottom tool bar that can be swiped left or right to expose more tools.

custom_bottom_bar A bottom tool bar that can be swiped left or right to expose more tools. usage Create your custom bottom bars with up to four custom

null 4 Jan 26, 2020
LakhanKumawat ᡖ⁺ 12 Dec 6, 2022
Terminal styling done right - now for Dart!

vscode debug console windows terminal Console/Terminal text coloring and styling library for Dart 'Terminal string styling done right' I created this

Tim Maffett 4 Dec 10, 2022
Collection of cool Layouts built with Flutter to Inspire Other UI developers and explore the possibilities of Flutter.

Awesome_Flutter_Layouts Would you like to Contribute your Designs? Please refer the Contribution guidelines before you dive In Need help? or Looks Som

Mahesh Jamdade 103 Nov 22, 2022
Flutter file based routing - File based routing and nested layouts for Flutter

Flutter File Based Routing I was inspired by the routing in remix.run with neste

Rody Davis 10 Sep 29, 2022
Responsive Layouts and Text for Flutter

About flutter_responsive plugin This plugin provides a easy and productive way to work with responsive layouts for Flutter Applications in mobile, des

Rafael Setragni 11 Aug 15, 2021
MetaFlutter - A tool to build Flutter layouts on-device

MetaFlutter MetaFlutter is a project to create Flutter layouts on device. Learn, explore and experiment with Flutter widgets directly on your phone. M

Deven Joshi 162 Nov 22, 2022
Package to select layout per orientation or device size like mobile vs tablet layouts or portrait vs landscape

proxy_layout Package to select layout per orientation or device size like mobile vs tablet layouts or portrait vs landscape Usage You have two widgets

Jimmy Aumard 8 Apr 18, 2021
Helper for building advanced multi child layouts.

About Boxy is designed to overcome the limitations of Flutter's built-in layout widgets, it provides utilities for flex, custom multi-child layouts, d

Andre 329 Dec 12, 2022
null 0 Feb 16, 2022
Another breakpoint framework. Aims to simplify as much as possible building adaptive layouts.

Another breakpoint framework. Aims to simplify as much as possible building adaptive layouts. Features Really simple implementation Works with and wit

null 3 Sep 26, 2022
ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

Basic Widgets Examples This is aimed for complete beginners in Flutter, to get them acquainted with the various basic widgets in Flutter. Run this pro

Pooja Bhaumik 815 Jan 3, 2023
FLUTTER API: Video Editor allows trim, crop, rotate and scale video with a super flexible UI Design

video_editor My other APIs Scroll Navigation Video Viewer Helpers Features Super flexible UI Design. Support actions: Crop Trim Scale Rotate Cover sel

Luis Felipe Murguia Ramos 214 Dec 26, 2022