Flutter响应式设计插件flutter_responsiveness的使用

Flutter响应式设计插件flutter_responsiveness的使用

flutter_responsiveness 是一个用于使应用具有响应式的新的Flutter包。响应式应用会根据屏幕或窗口的大小和形状来调整其用户界面。这在应用可以在多种设备上运行时尤为重要，从手表到手机、平板电脑，再到笔记本电脑或台式机。当用户在笔记本或台式机上调整窗口大小，或者改变手机或平板电脑的方向时，应用应相应地重新排列用户界面。

支持项目

如果您喜欢这个项目，请给它点个星以支持我们。

截图和GIF

使用方法

请参考 示例代码。

添加依赖

要使用此包，请在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_responsiveness:

如何使用

首先，初始化 ScreenSize 以使其具有响应性。该函数通过以下方式初始化屏幕：

• initialHeight 和 initialWidth 是您默认设置的应用程序屏幕布局的高度和宽度。
• 假设您正在使用Google Pixel 3a进行开发，则它将成为开发应用程序的默认手机。确保输入初始高度和宽度以实现响应式。
• width 和 height 参数是 MediaQuery 参数，它们将帮助应用实现响应式。

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    ScreenSize(
      initialHeight: 759.2727272727273, // 对于Google Pixel 2XL，高度为823
      initialWidth: 392.72727272727275, // 对于Google Pixel 2XL，宽度为411
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
    );
  });
}

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_responsiveness/flutter_responsiveness.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Home Page'),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  int _counter = 0;

  AnimationController? _controller;
  Animation? _animation;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      ScreenSize(
        initialHeight: 759.2727272727273,
        initialWidth: 392.72727272727275,
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
      );
    });

    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
    _animation = Tween(
            begin: 0.0 * ScreenSize.heightMultiplyingFactor!,
            end: 300.0 * ScreenSize.heightMultiplyingFactor!)
        .animate(_controller!)
      ..addStatusListener((state) {
        if (state == AnimationStatus.completed) {
          print("completed");
        } else if (state == AnimationStatus.dismissed) {
          print("dismissed");
        }
      })
      ..addListener(() {
        print("value:${_animation!.value}");
        setState(() {});
      });
    _controller!.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            FlutterLogo(
              textColor: Colors.purple,
              size: 100.0 * ScreenSize.heightMultiplyingFactor!,
            ),
            AnimatedContainer(
              width: 300.0 * ScreenSize.widthMultiplyingFactor!,
              height: _animation!.value,
              curve: Curves.easeIn,
              duration: Duration(seconds: 5),
              color: Colors.amber,
            ),
            SizedBox(
              height: 10.0 * ScreenSize.heightMultiplyingFactor!,
            ),
            Container(
              color: Colors.redAccent,
              height: 100.0 * ScreenSize.heightMultiplyingFactor!,
              width: 100.0 * ScreenSize.widthMultiplyingFactor!,
            ),
            SizedBox(
              height: 30.0 * ScreenSize.heightMultiplyingFactor!,
            ),
            Text(
              'You have pushed the button this many times:',
              style: TextStyle(
                fontSize: 16.0 * ScreenSize.heightMultiplyingFactor!,
              ),
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(
          Icons.add,
          size: 46 * ScreenSize.heightMultiplyingFactor!,
        ),
      ),
    );
  }
}

许可证

MIT License

Copyright (c) 2020 DC0202

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.