CODEWITHSUNDEEP
flutterbutton3d
function1983
function1983

Reputation: 1176

Create 3D, plastic looking buttons in Flutter

Design

I was given the task of designing these plastic looking buttons in Flutter. The design is not conventional in flutter with complex shadow and 3d effect and glowing lights hence I wasn't able to find similar looking codes online.

Maybe my artistic skill is not up to the task. Any help and suggestions are much appreciated as I just need a starting point. Thank you.

Upvotes: 0

Views: 1330

Answers (1)

returnVoid
returnVoid

Reputation: 644

Thats a design style called Neumorphism. It's a very cool design style I've used in my apps as well. Here is an example of a save as button I made.

GestureDetector(
  child: Container(
    decoration: BoxDecoration(
      color: Colors.grey[300],
      borderRadius: BorderRadius.circular(50),
      gradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [
          Color?.lerp(Colors.grey[400], Colors.white, .1)
            as Color,
          Color?.lerp(Colors.white, Colors.grey[100], .2)
            as Color,
          ]),
          boxShadow: const [
          //Shadow for top-left corner
            BoxShadow(
              color: Colors.grey,
              offset: Offset(5, 5),
              blurRadius: 3,
              spreadRadius: 1.7,
            ),

            //Shadow for bottom-right corner
            BoxShadow(
              color: Colors.white,
              offset: Offset(-3, -3),
              blurRadius: 3,
              spreadRadius: 1,
            ),
          ],
          border: Border.all(
          width: 0.5,
          color: Colors.white,
        )),
          child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            text.saveAs,
            style: const TextStyle(
            color: Colors.blue,
            fontSize: 30,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ),
    onTap: () {
      String board =
            Provider.of<BoardUtils>(context, listen: false)
              .boardToString();
            TextEditingController controller =
            TextEditingController();
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return _buildAlertDialog(
          controller, context, board);
     });
   }),

This is a package That is supposed to help you make what you are trying to make.

Upvotes: 2

Related Questions