spacing 0.0.1

Flutter | Avoid writing repetitious paddings and make your code more redeable

example/lib/main.dart

import 'package:spacing/spacing.dart';

import 'web_frame.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(platform: TargetPlatform.iOS),
      title: 'Spacing',
      builder: (context, child) => WebFrame(
        child: child,
      ),
      home: SpacingPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Spacing'),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverSafeArea(
            bottom: false,
            left: false,
            right: false,
            sliver: SliverPadding(
              padding: EdgeInsets.fromLTRB(20, 40, 20, 8),
              sliver: SliverToBoxAdapter(
                child:
                    Text('Section 1', style: Theme.of(context).textTheme.title),
              ),
            ),
          ),
          SliverPadding(
            padding: EdgeInsets.symmetric(vertical: 4, horizontal: 20),
            sliver: SliverSection(),
          ),
          SliverPadding(
            padding: EdgeInsets.fromLTRB(20, 40, 20, 8),
            sliver: SliverToBoxAdapter(
              child:
                  Text('Section 2', style: Theme.of(context).textTheme.title),
            ),
          ),
          SliverPadding(
            padding: EdgeInsets.symmetric(vertical: 4),
            sliver: SliverSectionFullScreen(),
          ),
          SliverPadding(
            padding: EdgeInsets.fromLTRB(20, 40, 20, 8),
            sliver: SliverToBoxAdapter(
              child:
                  Text('Section 3', style: Theme.of(context).textTheme.title),
            ),
          ),
          SliverPadding(
            padding: EdgeInsets.symmetric(vertical: 4, horizontal: 20),
            sliver: SliverSection(),
          ),
          SliverPadding(
            padding: EdgeInsets.fromLTRB(20, 40, 20, 8),
            sliver: SliverToBoxAdapter(
              child:
                  Text('Section 4', style: Theme.of(context).textTheme.title),
            ),
          ),
          SliverSafeArea(
            top: false,
            left: false,
            right: false,
            sliver: SliverPadding(
              padding: EdgeInsets.symmetric(vertical: 4, horizontal: 20),
              sliver: SliverSection(),
            ),
          )
        ],
      ),
    );
  }
}

class SpacingPage extends StatefulWidget {
  SpacingPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _SpacingPage createState() => _SpacingPage();
}

class _SpacingPage extends State<SpacingPage> {
  @override
  Widget build(BuildContext context) {
    return DefaultSpacing(
      verticalSpacing: 4,
      horizontalSpacing: 4,
      padding: EdgeInsets.symmetric(horizontal: 20),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Spacing'),
        ),
        body: CustomScrollView(
          slivers: <Widget>[
            SliverSpacing.topSafeArea(),
            SliverSpacing.vertical(20),
            SliverSpacing.padding(
              sliver: SliverToBoxAdapter(
                child: Text(
                  'Section 1',
                  style: Theme.of(context).textTheme.title,
                ),
              ),
            ),
            SliverSpacing(),
            SliverSpacing.padding(
              sliver: SliverSection(),
            ),
            SliverSpacing.vertical(20),
            SliverSpacing.padding(
              sliver: SliverToBoxAdapter(
                child: Text(
                  'Section 2',
                  style: Theme.of(context).textTheme.title,
                ),
              ),
            ),
            SliverSpacing(),
            SliverSectionFullScreen(),
            SliverSpacing.vertical(20),
            SliverSpacing.padding(
              sliver: SliverToBoxAdapter(
                child: Text(
                  'Section 3',
                  style: Theme.of(context).textTheme.title,
                ),
              ),
            ),
            SliverSpacing(),
            SliverSpacing.padding(
              sliver: SliverSection(),
            ),
            SliverSpacing.vertical(20),
            SliverSpacing.padding(
              sliver: SliverToBoxAdapter(
                child: Text(
                  'Section 4',
                  style: Theme.of(context).textTheme.title,
                ),
              ),
            ),
            SliverSpacing.padding(
              sliver: SliverSection(),
            ),
            SliverSpacing.bottomSafeArea()
          ],
        ),
      ),
    );
  }
}

class SliverSection extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverToBoxAdapter(
      child: Card(
        child: Container(
          height: 200,
          width: double.infinity,
        ),
      ),
    );
  }
}

class SliverSectionFullScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverToBoxAdapter(
      child: Container(
        color: Colors.grey[200],
        height: 200,
        width: double.infinity,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          padding: EdgeInsets.all(20),
          itemBuilder: (context, item) {
            return Card(
              child: Container(
                height: 100,
                width: 100,
              ),
            );
          },
          itemCount: 10,
        ),
      ),
    );
  }
}

class Item extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Container(
        height: 200,
        width: 200,
      ),
    );
  }
}

class ExampleColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final horizontalPadding = 20.0;
    final verticalSpace = 12.0;
    final padding = EdgeInsets.only(
        top: verticalSpace, left: horizontalPadding, right: verticalSpace);
    return Column(
      children: <Widget>[
        SafeArea(
          bottom: false,
          child: Padding(
            padding: padding,
            child: Item(),
          ),
        ),
        // No horizontal padding
        Padding(
          padding: EdgeInsets.only(top: verticalSpace),
          child: Item(),
        ),
        Padding(
          padding: padding,
          child: Item(),
        ),
        SafeArea(
          top: false,
          child: Padding(
            padding: padding,
            child: Item(),
          ),
        ),
      ],
    );
  }
}

class ExampleSpacingColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final spacing = SizedBox(height: 20);
    final padding = EdgeInsets.symmetric(horizontal: 20);
    return DefaultSpacing(
        verticalSpacing: 8,
        padding: EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          children: <Widget>[
            SafeArea(bottom: false, child: spacing),
            Padding(
              padding: padding,
              child: Item(),
            ),
            spacing,
            Item(),
            spacing,
            Padding(
              padding: padding,
              child: Item(),
            ),
            spacing,
            SafeArea(
              bottom: false,
              child: Padding(
                padding: padding,
                child: Item(),
              ),
            ),
          ],
        ));
  }
}

class ExampleSizeBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultSpacing(
        verticalSpacing: 8,
        padding: EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          children: <Widget>[
            Spacing.topSafeArea(),
            Spacing.padding(
              child: Item(),
            ),
            Spacing(),
            // No horizontal padding
            Item(),
            Spacing(),
            Spacing.padding(
              child: Item(),
            ),
            Spacing(),
            Spacing.padding(
              child: Item(),
            ),
            Spacing.bottomSafeArea(),
          ],
        ));
  }
}