如何在颤动中制作这样的计数器按钮

Question

我想要一个颤振计数按钮在右侧，如图

Answer 1

以后在发布问题时，请始终展示您所做的事情以及您希望其他人如何改进您的代码。 不要要求别人做你的工作。

查看以下代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.red,
        body: Center(
          child: Home(),
        ),
      ),
    );
  }
}


class Home extends StatefulWidget {
  int counter = 0;

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {


  @override
  Widget build(BuildContext context) {
  
    return Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.green,
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                  onTap: () => setState(() {
                           widget.counter == 0 ? print('counter at 0') : widget.counter--;
                        }),
                    child: Icon(Icons.remove)),
                Text('${widget.counter}'),
                GestureDetector(
                  onTap: () {setState(() {
                    print('set');
                            widget.counter++;
                        });},
                    child: Icon(Icons.add)),

              ],
            ),);
  }
}

根据自己的需要更改父容器的宽度或添加填充。

Answer 2

Container(   decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(35),
    color: Colors.green,   ),   child: Row(
    mainAxisSize: MainAxisSize.min,
    children: const [
      Padding(
        padding: EdgeInsets.all(8.0),
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
      Text('1', style: TextStyle(color: Colors.white),),
      Padding(
        padding: EdgeInsets.all(8.0),
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
    ],   ), )

请试试这个..我希望它会帮助你:)