flexible 1.0.0 icon indicating copy to clipboard operation
flexible: ^1.0.0 copied to clipboard

Flutter UI scalable layout scheme. We want to be able to adapt perfectly to different resolution devices. Scales to the width of the screen.

flutter_flexible #

Build Status codecov

Flutter UI scalable layout scheme.

Solve problem #

Visual designers usually output only one screen design draft when we develop mobile app, we want to be able to adapt perfectly to different resolution devices.

Implementation scheme #

Scales to the width of the screen. The most suitable UI can scroll up and down.

How to use #

Import #

import 'package:flexible/flexible.dart';

example #

 ScreenFlexibleWidget(  // 1. Wrap with `ScreenFlexibleWidget`
  child: Builder(
    builder: (BuildContext context) {
      return Container(
        color: Colors.red,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              width: flexible(context, 187.5),  // 2. All pixel value use `flexible` function , 375.0/2=187.5, 
                                                // this container is half the width of the screen on any device.
              height: flexible(context, 500.0),
              color: Colors.yellow,
              child: Center(
                child: Text(
                  'A',
                  style: TextStyle(
                    fontSize: flexible(context, 200.0), // Text fontSize also use `flexible`
                    color: Colors.black,
                    decoration: TextDecoration.none,
                  ),
                ),
              ),
            )
          ],
        ),
      );
    },
  ),
);
7
likes
110
pub points
61%
popularity

Publisher

verified publisher iconsongfei.org

Flutter UI scalable layout scheme. We want to be able to adapt perfectly to different resolution devices. Scales to the width of the screen.

Documentation

API reference

License

Icon for licenses.Apache-2.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on flexible