I want a flutter counting button on the right side, as shown in the picture

CodePudding user response：

In future while posting a question, please always show what you have done and how you want others to improve your code. Do not ask someone to do your work.

Check out the following code:

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)),

              ],
            ),);
  }
}

Change the width or add padding of the parent container according to your own need.

CodePudding user response：

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,
        ),
      ),
    ],   ), )

Please try this.. I hope it will help you :)