About 2 years ago, I created a sample card widget for a web dashboard with . I was inspired by the source code on . Now, I want to recreate it with Flutter code. Since it’s made for web UI, the style uses CSS code. In the original source, the creator uses a negative margin for the icon box. React JS Codepen .card
    margin: 0 -8px 32px -8px
    color: rgba(0,0,0,.87)
    box-shadow: 2px 2px 8px rgba(0,0,0,.05) I’ve recreated a similar card according to my dashboard needs with React JS. I use an absolute position and a negative value in the property. top Look at the icons stacked on top of the cards. boxicon: {
    position: "absolute",
    zIndex: 1,
    top: -20,
    left: 12,
} How about in Flutter? In Flutter, we can use on some of the widgets. For example, Container, Card, etc. And the property is implementing the . This class is also used to set padding in Flutter. margin margin class EdgeInsetsGeometry How we use padding and margin in Flutter: Container(
   padding: EdgeInsets.all(8),
   margin: EdgeInsets.fromLRTB(4,8,4,2)
) EdgeInsetsGeometry in , has an method. So…. Flutter isNonNegative Margin values must be positive, we cannot assign negative values to EdgeInsetsGeometry. We will receive a when we provide negative values to the or properties. failed assertion margins padding ════════ Exception caught by widgets library ════════
The following assertion was thrown building Card(dirty, dependencies: [_InheritedTheme, _LocalizationsScope-[GlobalKey#95d0d]]):
'package:flutter/src/widgets/container.dart': Failed assertion: line 267 pos 15: 'margin == null || margin.isNonNegative': is not true. To create the card widget, we can make a similar behavior, or create a similar shape. Here are several ways to achieve this: Positioned widget | In CSS if you know about . In Flutter we can achieve similar behavior with the Positioned widget. position: absolute Transform widget | This is similar to the transform property in CSS. It applies a transformation before the widget is rendered. CustomPainter | I haven’t tried this, but I think it’s possible to create a custom shape like the card above with the CustomPainter class. In this article, I will use the Transform class to crate card widgets like the image above. Since a negative margin can’t be applied, we will move the icon widget with matrix translation from the class. Transform Matrix translation: A without changing its size, shape, or orientation… [ ] type of transformation that occurs when a figure is moved from one location to another on the coordinate plane ref With matrix translation, we can move widgets without changing anything except their position. We can prove it by comparing the position of the widget’s coordinates. If you wonder how to get the coordinate of a widget, you can try with extension method . globalPaintBound Read my article about it here: https://medium.easyread.co/how-to-get-widget-coordinates-in-flutter-ui-dart-extension-4-d59dc15a9e3f?embedable=true Making cards Before we apply the transformation widget, let's create the initial card. . (See the picture before translation) Now we want to place the icon staked above the card. We will use matrix translation. To add the translation, there are 2 options. If the widget parent is not a Container widget, you can wrap them with the widget. Transfrom For example: Transform(
  transform: Matrix4.translationValues(x, y, z),
  child: const SomeWidget(),
) If it's a Container, then we can assign it directly to the transform property: Container(
  transform: Matrix4.translationValues(x, y, z),
  .....// other props
) After adding the translation value to the icon widget, now we have a stacked Icon on the card widget ( . See the picture after translation) Additional: Neumorphism widget We have done with the shape of the card widget. But if we compare the current result, we missed the shadow. To add the effect shadow we can add it manually to the property from the Container widget. BoxDecoration We also can use an extension method named . addNeumorphism Manual shadow for the icon box Container(
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20),
      boxShadow: const [
        BoxShadow(
          offset: Offset(3, 3),
          blurRadius: 8,
          color: Color(0xFFffa726),
        ),
        BoxShadow(
          offset: Offset(-1, -1),
          blurRadius: 10,
          color: Colors.white,
        ),
.... Use the extension method neumorphism @override
Widget build(BuildContext context) {
  return Container(
  ..../// rest of code
  ).addNeumorphism(
      bottomShadowColor: Colors.black26,
); And now we have a better card with the implemented shadow effect: Finishing Up The final step we need to do is to create a responsive layout on the card widget. I’ve also shared an article about responsive layouts in Flutter. For more details, you can read it here: https://hackernoon.com/creating-responsive-flutter-app-layouts-for-all-screen-sizes?embedable=true Cards will be displayed with the widget. Then we apply the responsive method to determine the , and the value. GridView.count() crossAxisCount childAspectRatio ...
body: Padding(
  padding: const EdgeInsets.symmetric(horizontal: 18.0),
  child: GridView.count(
    crossAxisSpacing: 20,
    // mainAxisSpacing: 20,
    childAspectRatio: size.width /
        size.height /
        context.responsive(0.3,
            md: 0.6,
            lg: 0.59,
            xl: 1.2), // this ratio is hard code, you may need to change it base on your need
    crossAxisCount: context.responsive(1, md: 2, xl: 4),
    children: widge,
  ),
),
... And finally, we have a card widget with stacked icons written in Flutter code. Full code and demo can be found on Dartpad: https://dartpad.dev/?id=be8f84a08f9e2347f20be108ac030484 Thank you for reading! Also published here.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

How to Create the Negative Margin Effect in Flutter

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Creating Responsive Flutter App Layouts for All Screen Sizes

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Creating Responsive Flutter App Layouts for All Screen Sizes

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps