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

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

通过实现基于Bootstrap 4.0+的断点来使您的应用具有响应性。

特性

1. 从BuildContext获取屏幕宽度。
2. 获取当前断点。
3. 根据当前断点获取最大宽度。最大宽度可以由用户修改。

开始使用

1. 要使用此插件，请在pubspec.yaml文件中添加bootstrap_breakpoints作为依赖项。

dependencies:
  bootstrap_breakpoints:

或者运行：

flutter pub add bootstrap_breakpoints

1. 现在可以在Dart代码中使用以下导入语句：

import 'package:bootstrap_breakpoints/bootstrap_breakpoints.dart';

使用方法

请参阅/example文件夹中的示例。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 此小部件是您的应用程序的根组件。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // 获取当前断点的最大宽度
    double containerWidth = Breakpoints().getMaxWidth(context);

    // 打印当前断点的最大宽度
    debugPrint(containerWidth.toString());

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            const SizedBox(
              height: 5,
            ),
            Container(
              height: 100,
              width: containerWidth,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black54),
              ),
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      "当前断点: ${Breakpoints().getScreenSize(context).toString()}",
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    Text(
                      "最大宽度: ${Breakpoints().getMaxWidth(context).toString()}",
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

说明

1. 获取当前断点的最大宽度：

   double containerWidth = Breakpoints().getMaxWidth(context);
   

   这行代码会根据当前屏幕尺寸获取一个推荐的最大宽度值。

2. 打印当前断点的最大宽度：

   debugPrint(containerWidth.toString());
   

   这行代码用于调试，可以在控制台中看到当前断点的最大宽度值。

3. 显示当前断点和最大宽度：

   Text(
     "当前断点: ${Breakpoints().getScreenSize(context).toString()}",
   ),
   Text(
     "最大宽度: ${Breakpoints().getMaxWidth(context).toString()}",
   ),