Create a Brutalism UI in a flutter

Brutalism is a UI style of architecture that emerged in the 1950s and gained popularity in the mid-20th century.

Brutalism was generally characterised by its rough, unfinished surfaces, unusual shapes, and heavy-looking materials.

ChatGpt: The Brutalist style has been controversial, with some people viewing it as ugly and unwelcoming, while others appreciate its honesty and simplicity.

Popular apps such as CRED and website use Brutalist to gain user engagement.

Hello guys, This is CodingWithTashi and in this shitty post, we will learn how to build brutalist UI in your flutter application.

Note: You can also see How to create neumorphic UI in a flutter.

In this post, We will create

1. Brutalism Button UI
2. Brutalism Card UI

1. Brutalist Button UI

We will try to create a simple button with boxShadow as below

First, we need to create Container that has border green and boxShadow with green color.

Given code will give following output

Now In line no 16, you can add the Text widget.

Now, If you run the project, You will get the button UI

But if we click on the button, nothing happened. What we really expect is a button to have a click animation.

Let’s add some animation to the same button. Update the code as below.

• Here, we have added the variable _isBoxShadowVisible to track whether the button is pressed or not.
• In line 2, we have wrapped the widget with GestureDetector so that we can update the flag _isBoxShadowVisible.
• At line 9 we have updated our Container widget to an AnimatedContainer and added duration to it.
• Great, Now that we have the flag, At lines 21 –25 We have added the same condition in boxShadow and updated accordingly.

Alright, now if you run the application, you should get the animation like below.

2. Brutalist Card UI

Here, we will try to create a simple Brutalist card like below with flutter.

We will first create the SizedBox with the BeveledRectangleBorder as you can see in the image we have beveled rectangle border.

For that, we will use the material widget. Paste the following code.

If you run the app, you should get the SizedBox with the black border like below

Now, Let's add this Column in Container child line no 28,

Now if you run the app, you should get the following UI

Look cool right?, You should get the descent UI by now, you can also add gradient color to it.

Thanks, guys, That’s all for now, Make sure to give a clap 👏 and leave some engagement. If there is any correction or feedback feel free to leave a comment as well.

If any of my shitty posts help you in any way, you can consider buying me a cup of coffee🙏.

buymeacoffee.com/codingwithtashi

Check out similar posts from CodingWithTashi. Connect me on Twitter or Linkedin.