Question

你好，我想创建一个按钮

multi color button

基本上我该如何创建这种类型的按钮，我的要求是创建一个按钮，使botton声明color就像colors.red [100]，而按钮的终点就像color.red [900]在起点和终点之间。按钮就像是为颜色增加颜色，例如（从红色[100]和红色[101]开始，然后从红色[102]开始着色，等等，就像在单个按钮中创建浅色到深色一样

Answer 1

使用gradient和boxShadow

Center(
        child: Container(
          margin: EdgeInsets.symmetric(horizontal: 30.0),
          alignment: Alignment.center,
          width: double.infinity,
          height: 50.0,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(8.0)),
            gradient: LinearGradient(
              colors: [
                Colors.red[100],
                Colors.red[900],
              ]
            ),
            boxShadow: [
              BoxShadow(
                offset: Offset(0, 0),
                color: Colors.red[100],
                blurRadius: 16.0,
              ),
              BoxShadow(
                offset: Offset(0, 0),
                color: Colors.red[200],
                blurRadius: 16.0,
              ),
              BoxShadow(
                offset: Offset(0, 0),
                color: Colors.red[300],
                blurRadius: 16.0,
              ),
            ]
          ),
          child: Text("Login", style: TextStyle(color: Colors.white, fontWeight: FontWeight.w900, fontSize: 18.0))
        ),
      )

Answer 2

您可以在gradient小部件内使用Container

这是完整的代码：

 import 'package:flutter/material.dart';

 class ClassName extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
   return Scaffold(
     backgroundColor: Colors.grey[200],
  
     //You can add Appbar like this
     appBar: AppBar(
       backgroundColor: Colors.white,
       centerTitle: true,
       title: Text('This is appbar', style: TextStyle(color: Colors.black, fontSize: 18.0),),
     ),

     body: SingleChildScrollView(
       child: Padding(
         padding: EdgeInsets.all(10.0),
         child: Column(
           children: [

             //You can add other Widgets here

             Container(
               child: GestureDetector(
                 onTap: (){
                   //add functions of this button here
                 },
                 child: Container(
                   height: 50.0,
                   decoration: BoxDecoration(
                     gradient: LinearGradient(
                       begin: Alignment.centerLeft,
                       end: Alignment.centerRight,
                       colors: [Colors.red[100], Colors.red[900]],
                     ),
                     borderRadius: BorderRadius.all(Radius.circular(10.0)),
                   ),
                   child: Center(
                     child: Text('Login', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 18.0),),
                   ),
                 ),
               )
             ),

             //You can add other Widgets here
           
           ],
         ),
       ),
     ),
   );
 }

以下是屏幕截图：

我想这就是你要的。

如果需要其他帮助，请告诉我。

Answer 3

要使您的Button具有各种Colors，可以使用Container小部件并根据自己的喜好自定义gradient属性。

我在下面添加了一个演示代码，以帮助您满足您的要求：

           // use a container widget
            Container(
              // customize the height property
              height: 50,
              // customize the width property
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                // spice up the button with a radius
                borderRadius: BorderRadius.all(
                  Radius.circular(10),
                ),
                gradient: LinearGradient(
                    // gradient starts from left
                    begin: Alignment.centerLeft,
                    // gradient ends at right
                    end: Alignment.centerRight,
                    // set all your colors
                    colors: [
                      Colors.red[100],
                      Colors.red[200],
                      Colors.red[300],
                      Colors.red[400],
                      Colors.red[500],
                      Colors.red[600],
                      Colors.red[700],
                      Colors.red[800],
                      Colors.red[900],
                    ]),
              ),
              // the button text
              child: Center(
                child: Text(
                  'Login',
                  style: TextStyle(
                    fontWeight: FontWeight.w600,
                    color: Colors.white,
                  ),
                ),
              ),
            ),

如何在颤动中创建多色按钮

3 个答案: