skip to Main Content

I want to make this button design and for now I cannot get it right, I was playing with backgroundBlendMode but it’s impossible for me.

Widget buildButton(String value) {
  return Container(
    margin: const EdgeInsets.all(5.0),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20.0),
      gradient: const LinearGradient(
        colors: [
          Color(0xFF546486),
          Color(0xFF394A68),
        ],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
    ),
    child: Container(
      margin: const EdgeInsets.all(5.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20.0),        
        gradient: const LinearGradient(
          colors: [
            Color(0xFF394A68),
            Color(0xFF546486),
          ],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        boxShadow: const [
          BoxShadow(color: Color(0xFF394A68), blurRadius: 5.0),
        ],
      ),
      child: Center(
        child: Text(
          value,
          style: const TextStyle(
            color: Color(0XFFBCC6DF),
            fontSize: 30.0,
          ),
        ),
      ),
    ),
  );
}

This is what I got so far, feel free to change everything you want or need.

Current result

enter image description here

Expected result

enter image description here

2

Answers


  1. Hello please provide more code in which you are looking for as per my understanding i designed it here is the code

        import 'package:flutter/material.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter App!!',
          theme: ThemeData(
            colorSchemeSeed: Colors.indigo,
            useMaterial3: true,
            brightness: Brightness.light,
          ),
          darkTheme: ThemeData(
            colorSchemeSeed: Colors.blue,
            useMaterial3: true,
            brightness: Brightness.dark,
          ),
          home: const MyHomePage(title: 'Flutter Example App'),
          debugShowCheckedModeBanner: false,
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      const MyHomePage({super.key, required this.title});
    
      // This widget is the home page of your application. It is stateful, meaning
      // that it has a State object (defined below) that contains fields that affect
      // how it looks.
    
      // This class is the configuration for the state. It holds the values (in this
      // case the title) provided by the parent (in this case the App widget) and
      // used by the build method of the State. Fields in a Widget subclass are
      // always marked "final".
    
      final String title;
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      int _counter = 0;
    
      void _incrementCounter() {
        setState(() {
          // This call to setState tells the Flutter framework that something has
          // changed in this State, which causes it to rerun the build method below
          // so that the display can reflect the updated values. If we changed
          // _counter without calling setState(), then the build method would not be
          // called again, and so nothing would appear to happen.
          _counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        // This method is rerun every time setState is called, for instance as done
        // by the _incrementCounter method above.
        //
        // The Flutter framework has been optimized to make rerunning build methods
        // fast, so that you can just rebuild anything that needs updating rather
        // than having to individually change instances of widgets.
        return Scaffold(
          appBar: AppBar(
            // Here we take the value from the MyHomePage object that was created by
            // the App.build method, and use it to set our appbar title.
            title: Text(widget.title),
          ),
          body: Column(children: [
                SizedBox(height: 150, width: 150,
                child: buildButton("c"),
                )
                
              ],)
        );
      }
    }
    
    Widget buildButton(String value) {
      return Container(
        margin: const EdgeInsets.all(5.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(40.0),
          gradient: const LinearGradient(
            colors: [
              Color(0xFF546486),
              Color(0xFF394A68),
            ],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: Container(
          margin: const EdgeInsets.all(5.0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(40.0),        
            gradient: const LinearGradient(
              colors: [
                Color(0xFF394A68),
                Color(0xFF546486),
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            boxShadow: const [
              BoxShadow(color: Color(0xFF394A68), blurRadius: 5.0),
            ],
          ),
          child: Center(
            child: Text(
              value,
              style: const TextStyle(
                color: Color(0XFFBCC6DF),
                fontSize: 65.0,
              ),
            ),
          ),
        ),
      );
    }
    

    here is the output

    hope it works!!!!!!

    Login or Signup to reply.
  2. You should remove the margin on both Containers because they cause a noticeable line differencial in colors.

    In your second Container, you can use a RadialGradient instead for a circular gradient to create the darker color on the outer layer. Use transparency in the inner layer to show the LinearGradient behind the container.

     gradient:  RadialGradient(
              colors: [
                Colors.transparent,
                Colors.black.withOpacity(0.1),
              ],
    

    I am also using withOpacity for better blending. You can adjust it based on how intensive/darker you want the color to be on the outer layer. You can also add more Colors.transparent to increase the radius in the center.

    gradient:  RadialGradient(
              colors: [
                Colors.transparent,
                Colors.transparent,
                Colors.transparent,
                Colors.black.withOpacity(0.1),
              ],
    

    You also need to move the boxShadow to the first Container, because it’s the main parent that carries all the widgets. If you have it in the second container, with the colors transparent and opacity, it will be all shadowed.

    Here’s the full code that should get you close enough to expected result:

    Widget buildButton(String value) {
      return Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(40.0),
          gradient: const LinearGradient(
            colors: [
              Color(0xFF546486),
              Color(0xFF394A68),
            ],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
          boxShadow: [
            BoxShadow(color: Colors.black, blurRadius: 9.0),
          ],
        ),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(40.0),
            gradient: RadialGradient(
              colors: [
                Colors.transparent,
                Colors.transparent,
                Colors.transparent,
                Colors.black.withOpacity(0.1),
              ],
            ),
          ),
          child: Center(
            child: Text(
              value,
              style: const TextStyle(
                color: Color(0XFFBCC6DF),
                fontSize: 30.0,
              ),
            ),
          ),
        ),
      );
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search