GithubHelp home page GithubHelp logo

erlisoares / flutter-boxy Goto Github PK

View Code? Open in Web Editor NEW

This project forked from pingbird/boxy

0.0 1.0 0.0 1.68 MB

Helper for building advanced multi child layouts.

Home Page: https://pub.dev/packages/boxy

License: BSD 3-Clause "New" or "Revised" License

Dart 99.49% Kotlin 0.11% Swift 0.10% Objective-C 0.01% HTML 0.29%

flutter-boxy's Introduction

boxy, Layout made simple

About

Boxy is designed to overcome the limitations of Flutter's built-in layout widgets, it provides utilities for flex, custom multi-child layouts, dynamic widget inflation, slivers, and more!

Flex layouts

A common design problem is when you need one or more children of a Row or Column to have the same cross-axis size as another child in the list, with boxy this can be achieved trivially using BoxyRow, BoxyColumn and Dominant.

Using BoxyRow. A sidebar matches the height of a dynamically sized container

Using BoxyColumn. An underbar matches the width of a dynamically sized container

See the documentation of BoxyRow and BoxyColumn for more information.

Custom layouts

One of the pains of implementing custom layouts is learning the RenderObject model and how verbose it is, to make this process easier we provide an extremely simple container CustomBoxy that delegates layout, paint, and hit testing.

1. Declare widget using CustomBoxy 2. Implement delegate. Dynamic header and content in a column with an avatar pinned to the center of both

The most powerful feature of CustomBoxy is the ability to inflate arbitrary widgets at layout time, this means widgets can depend on the size of others, something previously impossible without hacky workarounds.

Lazy-loading children with BoxyDelegate.inflate to match the width of a container

See the documentation of CustomBoxy and BoxyDelegate for more information.

Slivers

Ever want to give SliverList a box decoration? The sliver library provides SliverContainer which allows you to use box widgets as the foreground or background of a sliver.

This library also provides SliverCard, a SliverContainer that looks like a card.

Adding a custom card-like background to a SliverList, while still building lazily

Also check out:

Miscellaneous

The utils library provides extensions with dozens of axis-dependant methods on BoxConstraints, Size, Offset, and more. These extensions make writing directional layouts significantly less cumbersome.

The OverflowPadding widget is similar to Padding but allows the child to overflow when given negative insets.

flutter-boxy's People

Contributors

pingbird avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.