CodeseniorSoftware Tutorials

Number Increment Decrement Widget

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:kadir_alkan_kuafor/models/general_model.dart';
import 'package:kadir_alkan_kuafor/models/number_increment_decrement_model.dart';

class NumberIncrementDecrement extends StatefulWidget {
  final NumberIncrementDecrementModel numberIncrementDecrementModel;

  NumberIncrementDecrement({Key key, this.numberIncrementDecrementModel})
      : super(key: key);

  @override
  State createState() => _NumberIncrementDecrementState(
      numberIncrementDecrementModel: this.numberIncrementDecrementModel);
}

class _NumberIncrementDecrementState extends State {
  General general = new General();

  TextEditingController controller = TextEditingController();
  final NumberIncrementDecrementModel numberIncrementDecrementModel;

  _NumberIncrementDecrementState({
    @required this.numberIncrementDecrementModel,
  });

  @override
  void initState() {
    super.initState();
    controller.addListener(onChange);
  }

  void onChange() {
    this.numberIncrementDecrementModel.value=int.parse(controller.text.replaceAll("Adet", "").trim());
  }
  @override
  Widget build(BuildContext context) {
    return new Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
            width: 25,
            height: 48,
            child: GestureDetector(
              onTap: () => minus(),
              child: Container(
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                          topLeft: new Radius.circular(5),
                          bottomLeft: new Radius.circular(5)),
                      border: Border.all(width: 2, color: Colors.white)),
                  child: Icon(Icons.remove, color: Colors.black)),
            )),
        SizedBox(
          width: 80,
          height: 50,
          child: TextField(
            autofocus: false,
            controller: controller,
            keyboardType: TextInputType.number,
            textAlign: TextAlign.center,
            style: TextStyle(color: Colors.yellow),
            inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
            decoration: InputDecoration(
              contentPadding: EdgeInsets.all(8.0),
              hintText: this.numberIncrementDecrementModel.value.toString()+" Adet",
              hintStyle: TextStyle(color: Colors.yellow),
              enabledBorder: const OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.zero),
                borderSide: const BorderSide(color: Colors.white, width: 2.0),
              ),
              focusedBorder: const OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.zero),
                borderSide: const BorderSide(color: Colors.white, width: 2.0),
              ),
            ),
          ),
        ),
        SizedBox(
            width: 25,
            height: 48,
            child: GestureDetector(
              onTap: () => add(),
              child: Container(
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                          topRight: new Radius.circular(5),
                          bottomRight: new Radius.circular(5)),
                      border: Border.all(width: 2, color: Colors.white)),
                  child: Icon(Icons.add, color: Colors.black)),
            )),
      ],
    );
  }

  void add() {
    setState(() {
      this.numberIncrementDecrementModel.value++;
      controller.text = this.numberIncrementDecrementModel.value.toString()+' Adet';
    });
  }

  void minus() {
    setState(() {
      if (this.numberIncrementDecrementModel.value != 0) this.numberIncrementDecrementModel.value--;
      controller.text = this.numberIncrementDecrementModel.value.toString()+' Adet';
    });
  }
}

Model Class

class NumberIncrementDecrementModel{
    int value;
}

Usage

 Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            new NumberIncrementDecrement(numberIncrementDecrementModel:numberIncrementDecrementModel),
            FlatButton(
                shape: RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(5.0),
                    side: BorderSide(color: Colors.yellow)),
                onPressed: () =>addToCart(),
                child: Text(
                  "Sepete Ekle",
                  style: TextStyle(color: Colors.white),
                ),
              ),
          ],

Result