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,
                  ),
                ),
              ),
            )
          ],
        ),
      );
    },
  ),
);

You can change design draft size , default is 375.0

    ScreenFlexible.designScreenWidth = 750.0;

Libraries

flexible
screen_flexible
screen_flexible_widget