float_column 4.0.3 copy "float_column: ^4.0.3" to clipboard
float_column: ^4.0.3 copied to clipboard

Flutter FloatColumn widget for building a vertical column of widgets and text where the text wraps around floated widgets, similar to how CSS float works.

float_column #

Pub

Flutter FloatColumn widget for building a vertical column of widgets and text where the text wraps around floated widgets, similar to how CSS float works.

Try it out at: https://ronjb.github.io/float_column

Example #

You can use it for drop caps and so much more:

Example with left-to-right text

Example with right-to-left text #

Example with right-to-left text

FloatColumn widgets can be floated and nested #

Example with nested FloatColumn widgets

Getting Started #

Add this to your app's pubspec.yaml file:

dependencies:
  float_column: ^4.0.1
copied to clipboard

Usage #

Then you have to import the package with:

import 'package:float_column/float_column.dart';
copied to clipboard

And use FloatColumn where appropriate. For example:

FloatColumn(
  children: const [
    Floatable(
      float: FCFloat.start,
      padding: EdgeInsets.only(right: 8),
      child: _Box(Text('Box 1')),
    ),
    Floatable(
      float: FCFloat.end,
      clear: FCClear.both,
      clearMinSpacing: 20,
      padding: EdgeInsets.only(left: 8),
      child: _Box(Text('Box 2')),
    ),
    WrappableText(text: 'This text will wrap around the floated widgets...'),
  ],
),
copied to clipboard
73
likes
160
points
8.47k
downloads

Publisher

verified publisherronbooth.com

Weekly Downloads

2024.09.29 - 2025.04.13

Flutter FloatColumn widget for building a vertical column of widgets and text where the text wraps around floated widgets, similar to how CSS float works.

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on float_column