flexible 1.0.0 copy "flexible: ^1.0.0" to clipboard
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
120
pub points
53%
popularity

Publisher

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache-2.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on flexible