flutter_screen_adapter 0.0.2

Flutter application different terminal screen adaptation scheme.

flutter_screen_adapter

中文文档

Flutter application different terminal screen adaptation scheme.

Steps for usage

Step 1: Add flutter_screen_adapter to the pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter

  flutter_screen_adapter: ^0.0.1

Step 2: Initialization

import 'package:flutter_screen_adapter/flutter_screen_adapter.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {

    /// Note：
    /// Must be initialized in `WidgetsApp` or `MaterialApp widget`,
    /// Otherwise, an error will be reported because `MediaQuery` cannot be found.

    ScreenAdapter.init(context);
    return ...
  }
}

Step 3: Set the element size

// Square
Container(
  width: ScreenAdapter.value(100),
  height: ScreenAdapter.value(100),
  color: Colors.yellow,
  child: null
)

// Rectangle

Container(
  width: ScreenAdapter.value(200),
  height: ScreenAdapter.value(100),
  color: Colors.red,
  child: null
)

Provided attributes

Here are two commonly used

...

/// Get adaptive value according to device information
/// Used to use different screens to achieve the same effect as the design draft
///
/// [vertical] Whether it is a vertical adaptive value, the default is horizontal

static double value(num value, {vertical = false});

/// Get the current device screen width
///
static double get screenWidth;

...