flexible 0.1.3 copy "flexible: ^0.1.3" to clipboard
flexible: ^0.1.3 copied to clipboard

outdated

Flutter UI scalable layout scheme. 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. Scale [...]

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
0
pub points
53%
popularity

Publisher

verified publishersongfei.org

Flutter UI scalable layout scheme. 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. Scales to the width of the screen. The most suitable UI can scroll up and down.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter, kernel

More

Packages that depend on flexible