Icon Box Dark & Light Mode

Introduction of Icon Box

In this post, we dive into the design of Icon Boxes using the Neumorphism trend, a modern take on UI design that combines flat design with soft, three-dimensional elements. The Neumorphism style creates a smooth, tactile effect with subtle shadows and highlights, giving icons boxe a minimalist yet dynamic appearance. This design approach enhances user interfaces by making elements feel intuitive and interactive while maintaining a clean and modern aesthetic. Perfect for light or dark mode designs, Neumorphism adds a unique depth and realism to the traditional icons box.

Decoration Code for Light Mode: 

decoration: BoxDecoration(
  color: Colors.grey[300],
  borderRadius: BorderRadius.all(
  Radius.circular(20),
  ),
  boxShadow: [
    BoxShadow(
      color: Colors.grey.shade500,
      offset: Offset(5.0, 5.0),
      blurRadius: 15.0,
      spreadRadius: 1.0,
    ),
    BoxShadow(
      color: Colors.white,
      offset: Offset(-5.0, -5.0),
      blurRadius: 15.0,
      spreadRadius: 1.0,
    ),
  ],
),

Final Icon Box Code of Light Mode:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[300],
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          child: Icon(
            Icons.auto_awesome_outlined,
            size: 80,
          ),
          decoration: BoxDecoration(
            color: Colors.grey[300],
            borderRadius: BorderRadius.all(
              Radius.circular(20),
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.shade500,
                offset: Offset(5.0, 5.0),
                blurRadius: 15.0,
                spreadRadius: 1.0,
              ),
              BoxShadow(
                color: Colors.white,
                offset: Offset(-5.0, -5.0),
                blurRadius: 15.0,
                spreadRadius: 1.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Decoration Code for Dark Mode: 

decoration: BoxDecoration(
  color: Colors.grey[850],
  borderRadius: BorderRadius.all(
  Radius.circular(20),
  ),
  boxShadow: [
    BoxShadow(
      color: Colors.grey.shade900,
      offset: Offset(5.0, 5.0),
      blurRadius: 15.0,
      spreadRadius: 1.0,
    ),
    BoxShadow(
      color: Colors.grey.shade800,
      offset: Offset(-5.0, -5.0),
      blurRadius: 15.0,
      spreadRadius: 1.0,
    ),
  ],
),

Final Icon Box Code of Dark Mode:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[850],
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          child: Icon(
            Icons.apple,
            size: 80,
            color: Colors.white,
          ),
          decoration: BoxDecoration(
            color: Colors.grey[850],
            borderRadius: BorderRadius.all(
              Radius.circular(20),
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.shade900,
                offset: Offset(5.0, 5.0),
                blurRadius: 15.0,
                spreadRadius: 1.0,
              ),
              BoxShadow(
                color: Colors.grey.shade800,
                offset: Offset(-5.0, -5.0),
                blurRadius: 15.0,
                spreadRadius: 1.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Thank for visiting Hybrid App Development
Posted by Hussam HM