flexible 0.1.4

Flutter Android iOS web

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,
                  ),
                ),
              ),
            )
          ],
        ),
      );
    },
  ),
);
4
likes
100
pub points
62%
popularity

Publisher

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

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on flexible