Flutter自适应内边距插件escapable_padding的使用

在Flutter开发过程中，有时我们希望给列表中的所有项目添加内边距，但有一个例外。通常情况下，我们需要手动为每个子项添加内边距，除了那个不需要内边距的子项。然而，通过使用escapable_padding插件，我们可以简化这一过程。该插件允许我们在Flex、Column或Row中添加内边距，并将异常项包裹在Escape小部件中，使其能够突破这些内边距。

特性

• 可以为Column、Row和Flex添加内边距，并带有异常项！

开始使用

首先，在pubspec.yaml文件中添加escapable_padding依赖：

dependencies:
  escapable_padding: ^1.0.0
  flutter:
    sdk: flutter

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

使用方法

使用escapable_padding非常简单。只需将你的Column、Row或Flex包裹在一个EscapablePadding小部件中，并提供一个内边距值即可。

以下是一个简单的示例：

// 导入必要的包
import 'package:escapable_padding/escapable_padding.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Escapable Padding Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Escapable Padding Demo'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: Center(
          child: Container(
            color: Colors.blue.shade100,
            width: 300,
            child: EscapablePadding(
              // 设置水平内边距为50
              padding: const EdgeInsets.symmetric(horizontal: 50),
              flexChild: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text('This is a text is affected by the padding provided'),
                  const SizedBox(height: 12),
                  const Escaped(
                    child: Text('However, this text is escaped and should be able to take full width here'),
                  ),
                  const SizedBox(height: 12),
                  const Text(
                    'Below there will be a normal text button. You can see that its body is not escaped and thus text is indented.',
                  ),
                  const SizedBox(height: 12),
                  TextButton(onPressed: () {}, child: const Text('This is a button')),
                  const SizedBox(height: 12),
                  const Text(
                    'However we could escape a button to completely ignore the provided padding to this Escapeble Flex',
                  ),
                  const SizedBox(height: 12),
                  Escaped(
                    child: TextButton(onPressed: () {}, child: const Text('This is an escaped button')),
                  ),
                  const Text(
                    'And this way we could make sure we set the padding of the escaped text button to a value to align with the text',
                  ),
                  const SizedBox(height: 12),
                  Escaped(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 50 - 12),
                      child: TextButton(onPressed: () {}, child: const Text('This is an escaped button')),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}