grandiose-fauna-2735

readme.md

grandiose-fauna-2735

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';

// box-shadow: 0px 1px 4px rgba(158, 158, 160, 0.04), 0px 2px 16px rgba(163, 163, 163, 0.1);
const shadowLight = [
  BoxShadow(
    color: Color.fromRGBO(158, 158, 160, 0.04),
    spreadRadius: 0,
    blurRadius: 4,
    offset: Offset(0, 1), 
  ),
  BoxShadow(
    color: Color.fromRGBO(163, 163, 163, 0.1),
    spreadRadius: 0,
    blurRadius: 16,
    offset: Offset(0, 2), 
  ),
];

const shadowSemiMedium = [
  BoxShadow(
      color: Color.fromRGBO(158, 158, 160, 0.04),
      offset: Offset(0, 1),
      blurRadius: 4,
      spreadRadius: 0),
  BoxShadow(
      color: Color.fromRGBO(163, 163, 163, 0.2),
      offset: Offset(0, 2),
      blurRadius: 16,
      spreadRadius: 0)
];

const shadowMedium = [
  //drop-shadow(0px 1px 4px rgba(77, 94, 102, 0.04))
  BoxShadow(
      color: Color.fromRGBO(77, 94, 102, 0.04),
      offset: Offset(0, 1),
      blurRadius: 4,
      spreadRadius: 0),
  //drop-shadow(0px 5px 16px rgba(77, 94, 102, 0.2))
  BoxShadow(
      color: Color.fromRGBO(77, 94, 102, 0.2),
      offset: Offset(0, 5),
      blurRadius: 16,
      spreadRadius: 0)
];

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Color(0xfff0f0f0),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(children: [
        Text("Shadow Light"),
        Container(
          height: 100,
          width: 100,
          margin: const EdgeInsets.all(24),
          decoration:
              BoxDecoration(boxShadow: shadowLight, color: Colors.white),
        ),
        Divider(),
        Text("Shadow Semi Medium"),
        Container(
          height: 100,
          width: 100,
          margin: const EdgeInsets.all(24),
          decoration:
              BoxDecoration(boxShadow: shadowSemiMedium, color: Colors.white),
        ),
        Divider(),
        Text("Shadow Medium"),
        Container(
          height: 100,
          width: 100,
          margin: const EdgeInsets.all(24),
          decoration:
              BoxDecoration(boxShadow: shadowMedium, color: Colors.white),
        ),
        Divider(),
        Text("Shadow Semi Medium (circle shape)"),
        Container(
          height: 24,
          width: 24,
          decoration: BoxDecoration(
            boxShadow: shadowSemiMedium,
            color: Colors.white,
            shape: BoxShape.circle,
          ),
          margin: const EdgeInsets.all(24),
        )
      ]),
    );
  }
}
void main() {
  for (int i = 0; i < 5; i++) {
    print('hello ${i + 1}');
  }
}