как создать разноцветную кнопку во флаттере - PullRequest
Новая
       27

как создать разноцветную кнопку во флаттере

0 голосов
/ 10 июля 2020

привет друзья, я хотел бы создать кнопку

многоцветная кнопка

как я могу создать кнопку этого типа в основном мое требование состоит в том, чтобы создать кнопку с указанием цвета кнопки, как colors.red [100], а конечная точка кнопок как color.red [900] между началом и конечная точка моя кнопка похожа на растущий цвет, например (начальный цвет красный [100] и красный [101], затем красный [102] и так далее, как создание более светлого или темного цвета в одной кнопке

Ответы [ 3 ]

0 голосов
/ 10 июля 2020

Чтобы сделать ваш 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,
                  ),
                ),
              ),
            ),

введите описание изображения здесь

0 голосов
/ 11 июля 2020

Используйте 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))
        ),
      )

введите описание изображения здесь

0 голосов
/ 10 июля 2020

Вы можете использовать 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
           
           ],
         ),
       ),
     ),
   );
 }

Вот скриншот:

Скриншот

Думаю, это именно то, о чем вы просите.

И дайте мне знать, если понадобится другая помощь.

...