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

Last update: Jun 21, 2022

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.

GitHub

https://github.com/bizz84/layout-demo-flutter
Comments
  • 1. 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.
    
    Reviewed by vikbert at 2018-07-21 14:20
  • 2. 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

    Reviewed by gogreen42 at 2020-01-15 11:02
  • 3. 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.`

    Reviewed by PythonCodingUnicorn at 2019-12-18 01:24
  • 4. 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

    Reviewed by ilyaviache at 2020-05-12 12:24
  • 5. 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
    
    Reviewed by surferus at 2021-01-17 14:17
  • 6. 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.

    Reviewed by adavis605 at 2019-10-18 13:43
  • 7. 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??

    Reviewed by ddean6232 at 2019-10-10 16:48

Related

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

Jan 29, 2022
Collection of cool Layouts built with Flutter to Inspire Other UI developers and explore the possibilities of Flutter.
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

Jun 10, 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

Jan 26, 2022
Responsive Layouts and Text for Flutter
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

Aug 15, 2021
MetaFlutter - A tool to build Flutter layouts on-device
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

May 18, 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

Apr 18, 2021
Helper for building advanced multi child layouts.
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

Jun 25, 2022
Feb 16, 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

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.
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

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

Jan 23, 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.

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

Jan 26, 2020
May 7, 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
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

Jun 22, 2022
FLUTTER API: Video Editor allows trim, crop, rotate and scale video with a super flexible UI Design
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

Jun 27, 2022
Super Digital Mall is a Flutter ECommerce App Template.
Super Digital Mall is a Flutter ECommerce App Template.

An E-Commerce App Template in Flutter using GetX

Jun 3, 2022
A super effective dart library delivering performance & ensuring greater build speed.
A super effective dart library delivering performance & ensuring greater build speed.

A super effective Dart and Flutter library for delivering performante app ?? & ensuring greater build speed ?? . The package has some cook utilizes wh

Nov 22, 2021
A super powerful widget to help developers build complex views quickly and comfortably.
A super powerful widget to help developers build complex views quickly and comfortably.

FSuper FSuper can help developers build complex views quickly and comfortably. It supports rich text, rounded corners, borders, pictures, small red do

Jun 30, 2022
dna, dart native access. A lightweight dart to native super channel plugin

dna, dart native access. A lightweight dart to native super channel plugin, You can use it to invoke any native code directly in contextual and chained dart code.

Jul 22, 2021