A replacement for Flutter's default SafeArea widget

Overview

ColorfulSafeArea

Pub

A more customizable replacement for the SafeArea widget. It lets you set the color of your SafeArea without affecting the color of its child.

Example of ColorfulSafeArea

Use it just like a regular SafeArea widget.

Scaffold(
    body: ColorfulSafeArea(
        child: SomeWidget(),
    ),
);

Setting Color

The color of ColorfulSafeArea widgets are transparent by default. To change their color, set the color property.

Scaffold(
    body: ColorfulSafeArea(
        color: Colors.red,
        child: SomeWidget(),
    ),
);

Using Transparent Colors

You can use any color that has transparency

Scaffold(
    body: ColorfulSafeArea(
        color: Colors.red.withOpacity(0.7),
        child: SomeWidget(),
    ),
);

Overflow Rules

If you are using a transparent color and want the child of the ColorfulSafeArea to appear behind it, you can set overflowRules to define how the ColorfulSafeArea's child should appear. The default value is OverflowRules.all(false). The OverflowRules class works much like EdgeInsets.

// allows the child to overflow behind all sides
overflowRules: OverflowRules.all(true)

// allows the child to overflow only on the left and bottom sides
overflowRules: OverflowRules.only(left: true, bottom: true)

// allows the child to overflow on the top and bottom
overflowRules: OverflowRules.symmetric(vertical: true)

Blurring Overflow Area

If you want to apply a blur effect to the ColorfulSafeArea, you can apply a filter.

Scaffold(
    body: ColorfulSafeArea(
        overflowRules: OverflowRules.all(true),
        filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
        child: SomeWidget(),
    ),
);

Making Overflow Area Interactive

When you set overflowRules and would like for the parts of the child that have overflowed to be interactable behind the ColorfulSafeArea, you can set overflowTappable to true.

Scaffold(
    body: ColorfulSafeArea(
        overflowRules: OverflowRules.all(true),
        overflowTappable: true
        child: SomeWidget(),
    ),
);
You might also like...

Aris inheritedwidget - The Inherited Widget helps you to easily distribute your app state to every widget in your Flutter app

Aris inheritedwidget - The Inherited Widget helps you to easily distribute your app state to every widget in your Flutter app

Flutter Tutorial - Inherited Widget The InheritedWidget helps you to easily dist

Dec 29, 2021

FT-Custom-Widget - A Custom Widget Built With Flutter

FT-Custom-Widget - A Custom Widget Built With Flutter

Custom Widget Watch it on YouTube Product Screen Sample when you implement compl

Mar 29, 2022

A Flutter widget to show an icon collection to pick. This widget extend TextField and has a similar behavior as TextFormField

A Flutter widget to show an icon collection to pick. This widget extend TextField and has a similar behavior as TextFormField

icon_picker A Flutter widget to show an icon collection to pick. This widget extend TextField and has a similar behavior as TextFormField Usage In the

Sep 27, 2022

Flip widget - A Simple Flip widget For Flutter

Flip widget - A Simple Flip widget For Flutter

flip_widget Flip your widget. Usage FlipWidget( key: _flipKey, child: Co

Nov 13, 2022

Iridium-reader-widget - Plug and play reader widget allowing to easily integrate an Iridium viewer inside any app

Plug and play reader widget allowing to easily integrate an Iridium viewer insid

Dec 31, 2022

A new Flutter project. Use of Padding Class(Widget) and Card Class (Widget)

A new Flutter project. Use of Padding Class(Widget) and Card Class (Widget)

Use_Of_Card_And_Padding_Class A new Flutter project. Use of Padding Class(Widget) and Card Class (Widget) Getting Started This project is a starting p

Mar 18, 2022

Kullanmaya hazir widget cozumleri -Ready to use widget solutions

Ready to use widgets ( 🇹🇷 ) Projelerimde yararlı widget çözümleri kullanıyorum ve çoğu zaman orada kalıyor. Bunları hem ben hemde sizden gelenler il

Dec 27, 2022

This widget automatically scrolls the custom child widget to an infinite loop.

This widget automatically scrolls the custom child widget to an infinite loop.

Scroll Loop Auto Scroll This widget automatically scrolls the custom child widget to an infinite loop. Example Features Infinite Auto Scroll Custom ch

Dec 12, 2022

Widget that gives you the size of the widget in runtime.

Tailor Flutter widget that calculates the size of a widget in runtime. Usage Just wrap your widget with Tailor and get the size in the builder. The bu

Nov 2, 2022
Comments
  • Top flag is ignored when set to false

    Top flag is ignored when set to false

    On SafeArea, setting one of the directions (left, top, right, bottom) to false means that the safe padding will not be set to that particular direction. This is the result if we set top to false:

    Screen Shot 2020-09-24 at 16 58 53

    On ColorfulSafeArea, instead, it still applies the padding. The only thing it doesn't do is to paint the background. Here's what happens when setting the top parameter to false:

    Screen Shot 2020-09-24 at 16 57 55

    (please note that the white dots are part of a custom background I have in the app)

    It should be possible to ignore a padding, shouldn't it? If so, we can have two flags for each direction: one for painting or not, and another one for ignoring the padding or not.

    opened by morisoinc 5
  • Add gaussian blur as option for transparent background color?

    Add gaussian blur as option for transparent background color?

    First of all thanks for this great component!!! This is more a kind of feature request than an issue: Would it be possible to think about adding a gaussian blur as option to transparent background color? This would enable Cupertino-Style Apps which have the same style on status bar and bottom navigation bar (CupertinoTabBar).

    enhancement 
    opened by rafaelmaeuer 4
  • Null safety support and other changes

    Null safety support and other changes

    Changes

    • Migrate to null safety.
    • Some fixes in README.
    • Improve README and description of the example project.
    • Remove incorrect test.
    • Set version and update CHANGELOG content.
    opened by leynier 1
Owner
Ed
Ed
Realm is a mobile database: a replacement for SQLite & ORMs.

Realm is a mobile database that runs directly inside phones, tablets or wearables. This repository holds the source code for the Realm SDK for Flutter

Realm 526 Dec 23, 2022
Automatically generate profile picture with random first name and background color. But you can still provide pictures if you have them. As the default color, based on the name of the first letter. :fire: :fire: :fire:

FLUTTER PROFILE PICTURE Automatically generate profile picture with random first name and background color. But you can still provide pictures if you

Aditya Dharmawan Saputra 10 Dec 20, 2022
Add beautiful and trending tab indicators directly to your default Flutter TabBar

Add beautiful and trending tab indicators directly to your default Flutter TabBar. Features ?? Supports Android, iOS, Web Can be directly added to the

Adar 51 Dec 23, 2022
State Persistence - Persist state across app launches. By default this library store state as a local JSON file called `data.json` in the applications data directory. Maintainer: @slightfoot

State Persistence Persist state across app launches. By default this library store state as a local JSON file called data.json in the applications dat

Flutter Community 70 Sep 28, 2022
Widget to count the amount of nested widget tree, useful in the dynamic construction of the interface when it is important to know the depth of widget.

widget_tree_depth_counter Widget Tree Depth Counter WidgetTreeDepthCounter is a simple widget to count the amount of nested widget tree, useful in the

Riccardo Cucia 4 Aug 1, 2022
MindInventory 15 Sep 5, 2022
A simple detailed flutter widget that looks almost the same as the real instagram mention widget.

Instagram Mention Widgets 'small details do matter' ❤️ This package provides simple and almost the same UI details that the real Instagram mention wid

AbdulMuaz Aqeel 20 Oct 10, 2022
Custom dropdown widget allows to add highly customizable widget in your projects with proper open and close animations and also comes with form required validation.

Custom Dropdown Custom Dropdown package lets you add customizable animated dropdown widget. Features Lots of properties to use and customize dropdown

Abdullah Chauhan 22 Dec 29, 2022
A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

flutter_carousel_widget A customizable carousel slider widget in Flutter. Features Infinite Scroll Custom Child Widget Auto Play Horizontal and Vertic

NIKHIL RAJPUT 7 Nov 26, 2022
A flutter widget which renders its child outside the original widget hierarchy.

overlay_container A flutter widget which renders its child outside the original widget hierarchy. Demo. This demo is present as an example here. You c

Mustansir Zia 30 Jun 10, 2022