Flutter响应式布局插件flutter_responsive_framework的使用

Flutter响应式布局插件flutter_responsive_framework的使用

提供Widget以实现响应式布局、Widget和文本

主要目的是关于在平板电脑、手机和Web上实现响应式文本。

平板

手机

安装

在pubspec.yaml中添加flutter_responsive_framework

dependencies:
  flutter_responsive_framework: ^0.0.1

使用

导入包

import 'package:flutter_responsive_framework/flutter_responsive_framework.dart';

将MaterialApp包裹在ResponsiveUIWidget中

ResponsiveUIWidget( 
  builder: (context, orientation, screenType) {
    return MaterialApp(
      home: HomePage(),
    );
  },
);

控件大小

Container(
  width: LayoutSizeHelper.h(50), // 这将占用屏幕宽度的50%
  height: 30.h // 这将占用屏幕高度的30%
)

字体大小

Text('Responsive Framework', style: TextStyle(fontSize: 16.px))

或者

Text('Responsive Framework', style: TextStyle(fontSize: FontSizeHelper.NORMAL_TEXT_MEDIUM))
查看FontSizeHelper了解更多信息

响应式UI辅助类提供自定义响应式控件

ResponsiveUIHelper.buildTitleTextWidget(titleText);

ResponsiveUIHelper.buildNormalTextWidget(text);

ResponsiveUIHelper.buildPlatformWidget(
    tabletWidget: YourTabletWidget(),
    mobileWidget: YourMobileWidget(),
);

ResponsiveUIHelper.buildPlatformWidgetWithOrientation(
    tabletPortraitWidget: YourTabletPortraitWidget(),
    tabletLandScapetWidget: YourTabletLandScapeWidget(),
    mobilPortraitWidget: YourMobilePortraitWidget(),
    mobilLandScapeWidget: YourMobileLandScapeWidget(),
);

社区支持

如果您有任何建议或问题，请随时打开一个问题。

如果您希望贡献代码，请随时创建一个PR。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_responsive_framework/flutter_responsive_framework.dart';
import 'my_platform_widget.dart';

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

///
/// [MyApp]
///
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  final String _appTitle = 'Responsive Framework Demo';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ResponsiveUIWidget(
      builder: (context, orientation, screenType) {
        return MaterialApp(
          title: _appTitle,
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          navigatorObservers: const <NavigatorObserver>[],
          routes: <String, WidgetBuilder>{
            'my_platform_widget': (context) => const MyPlatformWidget(),
          },
          home: Builder(
            builder: (context) {
              return Scaffold(
                appBar: AppBar(
                  title: Text(_appTitle, style: TextStyle(fontSize: FontSizeHelper.H3)),
                ),
                body: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                        height: 10.h, // 它将占用屏幕高度的10%
                        width: 20.h, // 它将占用屏幕宽度的20%
                        color: Colors.blue,
                      ), 

                      // 调用px方法
                      SizedBox(height: 10.px),
                      
                      // 默认的标题文本控件由响应框架包提供
                      ResponsiveUIHelper.buildTitleTextWidget(title: DeviceHelper.getInstance().screenOrientationString),
                      
                      // 调用px方法
                      SizedBox(height: 10.px),
                      
                      // 默认的文本控件由响应框架包提供
                      ResponsiveUIHelper.buildNormalTextWidget(text: DeviceHelper.getInstance().screenTypeString),
                      
                      // 调用LayoutSizeHelper.px方法
                      SizedBox(height: LayoutSizeHelper.px(10)),
                
                      // 平台控件由响应框架包提供
                      ResponsiveUIHelper.buildPlatformWidget(
                        largeScreenWidget: Text('My Large Widget', style: TextStyle(fontSize: FontSizeHelper.NORMAL_TEXT_SMALL)), 
                        tabletWidget: Text('My Medium Widget', style: TextStyle(fontSize: FontSizeHelper.NORMAL_TEXT_SMALL)), 
                        mobileWidget: Text('My Small Widget', style: TextStyle(fontSize: FontSizeHelper.NORMAL_TEXT_SMALL)), 
                      ),
                      
                      SizedBox(height: LayoutSizeHelper.px(10)),
                
                      // 带有方向的平台控件由响应框架包提供
                      ResponsiveUIHelper.buildPlatformWidgetWithOrientation(
                        larageScreenPortraitWidget: Text('My Large Portrait Widget', style: TextStyle(fontSize: FontSizeHelper.NORMAL_TEXT_SMALL)), 
                        larageScreenLandScapetWidget: Text('My Large LandScape Widget', style: TextStyle(fontSize: FontSizeHelper.NORMAL_TEXT_SMALL)), 
                        tabletPortraitWidget: Text('My Medium Portrait Widget', style: TextStyle(fontSize: FontSizeHelper.NORMAL_TEXT_SMALL)), 
                        tabletLandScapetWidget: Text('My Medium LandScape Widget', style: TextStyle(fontSize: FontSizeHelper.NORMAL_TEXT_SMALL)), 
                        mobilPortraitWidget: Text('My Small Portrait Widget', style: TextStyle(fontSize: FontSizeHelper.NORMAL_TEXT_SMALL)), 
                        mobilLandScapeWidget: Text('My Small LandScape Widget', style: TextStyle(fontSize: FontSizeHelper.NORMAL_TEXT_SMALL)), 
                      ),

                      SizedBox(height: LayoutSizeHelper.px(10)),
                
                      InkWell(
                        child: Container(
                          padding: EdgeInsets.symmetric(horizontal: 8.px, vertical: 5.px),
                          decoration: BoxDecoration(
                            color: Colors.green,
                            borderRadius: BorderRadius.circular(8)
                          ),
                          child: Text('Go to PlatformWidgetScreen Implementation', style: TextStyle(color: Colors.white, fontSize: 16.px),),
                        ),
                        onTap: () {
                          Navigator.push(context, MaterialPageRoute(builder: (context) => 
                            /// MyPlatformWidget extends from abstract PlatformScreenWidget
                            const MyPlatformWidget()
                          ));
                          // Navigator.pushNamed(context, "my_platform_widget");
                        },
                      ),
                
                    ],
                  ),
                ),
              );
            }
          ),
        );
      }
    );
  }
}

更多关于Flutter响应式布局插件flutter_responsive_framework的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter响应式布局插件flutter_responsive_framework的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_responsive_framework插件来实现响应式布局的示例代码。

首先，确保你已经在你的pubspec.yaml文件中添加了flutter_responsive_framework依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_responsive_framework: ^x.y.z  # 替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的main.dart文件中，你可以按照以下步骤配置和使用flutter_responsive_framework：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Responsive Framework Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ResponsiveScaffold(
        // 设置断点
        breakpoints: <Breakpoint>{
          Breakpoint.phone,
          Breakpoint.tabletPortrait,
          Breakpoint.tabletLandscape,
          Breakpoint.desktop,
        },
        // 初始断点，可以根据需要设置
        initialBreakpoint: Breakpoint.phone,
        appBar: AppBar(
          title: Text('Responsive Layout Demo'),
        ),
        body: ResponsiveBuilder.builder(
          phone: () => PhoneLayout(),
          tabletPortrait: () => TabletPortraitLayout(),
          tabletLandscape: () => TabletLandscapeLayout(),
          desktop: () => DesktopLayout(),
        ),
      ),
    );
  }
}

// 各个断点对应的布局
class PhoneLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Phone Layout'),
    );
  }
}

class TabletPortraitLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Tablet Portrait Layout'),
        SizedBox(height: 20),
        // 添加更多内容
      ],
    );
  }
}

class TabletLandscapeLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Tablet Landscape Layout'),
        SizedBox(width: 20),
        // 添加更多内容
      ],
    );
  }
}

class DesktopLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      children: <Widget>[
        Card(child: Text('Desktop Layout - Item 1')),
        Card(child: Text('Desktop Layout - Item 2')),
        Card(child: Text('Desktop Layout - Item 3')),
        Card(child: Text('Desktop Layout - Item 4')),
      ],
    );
  }
}

在这个示例中，ResponsiveScaffold用于创建一个带有响应式功能的Scaffold。ResponsiveBuilder.builder方法允许你为每个断点定义一个不同的布局。breakpoints属性定义了所有可用的断点，而initialBreakpoint属性则设置了应用的初始断点。

通过这种方式，你可以轻松地为不同的屏幕尺寸和设备类型创建不同的布局，从而实现响应式设计。

回到顶部