Flutter屏幕适配插件adaptive_screen_flutter的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter屏幕适配插件adaptive_screen_flutter的使用

1示例代码

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

void main() {
  // 初始化自定义断点，设置web断点为1250
  ScreenInit.setWebBreakPoint(1250);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个 widget 是你应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Adaptive Screen',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  constHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: AdaptiveScreen(
        mobile: Container(
          color: Colors.blue,
          child: const Center(
            child: Text('Ini Mobile'),
          ),
        ),
        tablet: Container(
          color: Colors.green,
          child: const Center(
            child: Text('Ini Tab'),
          ),
        ),
        web: Container(
          color: Colors.yellow,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text('Ini Web'),
                TextButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) > const SecondPage()),
                    );
                  },
                  child: const Text('To Second page')
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  constSecondPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second page'),
      ),
      body: const Center(
        child: Text('Second page'),
      ),
    );
  }
}

更多关于Flutter屏幕适配插件adaptive_screen_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter屏幕适配插件adaptive_screen_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用adaptive_screen_flutter插件来进行屏幕适配的代码示例。adaptive_screen_flutter插件可以帮助你根据设备的屏幕尺寸和方向自动调整UI布局。

第一步：添加依赖

首先，在你的pubspec.yaml文件中添加adaptive_screen_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  adaptive_screen_flutter: ^最新版本号  # 请替换为实际的最新版本号

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

第二步：导入插件

在你的Dart文件中导入adaptive_screen_flutter插件：

import 'package:adaptive_screen_flutter/adaptive_screen_flutter.dart';

第三步：使用插件进行屏幕适配

你可以使用插件提供的AdaptiveScreen和ScreenUtil类来进行屏幕适配。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AdaptiveScreen(
      builder: (context, screenUtil) {
        return MaterialApp(
          home: HomeScreen(screenUtil: screenUtil),
        );
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  final ScreenUtil screenUtil;

  HomeScreen({required this.screenUtil});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('屏幕适配示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '屏幕宽度: ${screenUtil.screenWidth} px',
              style: TextStyle(fontSize: screenUtil.setSp(16)),
            ),
            SizedBox(height: screenUtil.setHeight(20)),
            Text(
              '屏幕高度: ${screenUtil.screenHeight} px',
              style: TextStyle(fontSize: screenUtil.setSp(16)),
            ),
            SizedBox(height: screenUtil.setHeight(20)),
            Container(
              width: screenUtil.setWidth(300),
              height: screenUtil.setHeight(200),
              color: Colors.blue,
              child: Center(
                child: Text(
                  '自适应容器',
                  style: TextStyle(color: Colors.white, fontSize: screenUtil.setSp(24)),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. AdaptiveScreen：这个Widget会接收一个builder函数，该函数返回你的主应用Widget，并会传递一个ScreenUtil实例。
  2. ScreenUtil：这个实例提供了多个方法来根据屏幕尺寸进行单位转换。例如：
    • screenUtil.screenWidth 和 screenUtil.screenHeight 用于获取屏幕的宽度和高度。
    • screenUtil.setWidth(double value) 和 screenUtil.setHeight(double value) 将dp或px转换为当前屏幕的宽度或高度比例。
    • screenUtil.setSp(double value) 将sp转换为当前屏幕的字体大小。

通过这种方式，你可以轻松地在Flutter应用中实现屏幕适配。希望这个示例对你有所帮助！

回到顶部