Flutter スペースを挿入するパッケージ gap

今回紹介するのは簡単に空白を挿入できる「gap」というパッケージです。
https://pub.dev/packages/gap

このパッケージは、ウィジェット間の間隔を簡単に追加できるようにし、SizedBoxなどを使う手間を減らすことができます。
直感的にサイズを指定できるため、SizedBoxよりも簡潔で読みやすいコードが書けます。

こんな感じで使用します。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Gapパッケージの例')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              Text('Hello!'),
              const Gap(20),  // 20pxの縦の間隔を追加
              Text('Flutter!'),
              const Gap(10),  // 10pxの縦の間隔を追加
              ElevatedButton(
                onPressed: () {},
                child: const Text('ボタン'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

タイトルとURLをコピーしました