响应式小部件

此插件有助于创建响应式小部件，这些小部件可根据参考屏幕尺寸（宽度、高度和最短边（dpi））与应用程序运行的屏幕之间的比例自动调整大小。该包仅更改了原始小部件，例如“Container”，以应用一个进行此计算的函数。

入门

首先，您需要使用代码 ResponsiveWidgets().init(context) 来使插件正常工作。代码需要放置在应用程序的第一个屏幕上，位于build方法内部，如下所示： 也可在代码中查看

class  _HomeScreenState  extends  State<HomeScreen> {
    @override
    Widget  build(BuildContext context) {
    
	    ResponsiveWidgets().init(context,
		    referenceHeight: 1920, // Optional
		    referenceWidth: 1080, // Optional
		    referenceShortestSide: 411 // Optional, default = 360
	    );
	    
	    return  Scaffold(
		    body: Container()
	    );
	}
}

ShortestSide basically the dpi of the device, can be got by this code: MediaQuery.of(context).size.shortestSide;
Or be changed in the device in Config>Developer Options>Drawing Section>ShortestSide.

小部件

ContainerResponsive

ContainerResponsive(
    child: Widget,
    height: double, // Responsive wight
    heightResponsive: bool, // Enable/Disable Responsive height
    width: double, // Responsive width
    widthResponsive: , bool// Enable/Disable Responsive width
)

EdgeInsetsResponsive (Can be used in any widget with parameter padding)

Padding(
    child: Widget,
    padding: EdgeInsetsResponsive.all(50), // EdgeInsets Responsive padding
)

IconResponsive

IconResponsive(
    icon,
    size: double, // Responsive size
)

IconButtonResponsive

IconButtonResponsive(
    icon: IconData,
	size: double, // Responsive size,
	onTap: (){}   
)

TextResponsive

TextResponsive(
    text // Responsive fontSize
)

RaisedButtonResponsive

RaisedButtonResponsive(
    child: Widget,
    onPressed: (){}
)

用于负责任地重新计算尺寸的函数

对于一些没有创建响应式小部件的特殊情况，例如Positioned，解决方法很简单，使用此函数：ResponsiveWidgets().getSize(double size)，它将返回正确的值到屏幕。

示例

分别为混合、响应式和普通

Mixed, responsive and normal, respectively

非响应式页面

Not responsive page

响应式页面

Responsive page

GitHub

https://github.com/LucazzP/responsive_widgets