Flutter4Fun.com - UI Challenge 6

main.dart

import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(brightness: Brightness.dark),
      debugShowCheckedModeBanner: false,
      home: JuiceDetailsPage(),
    );
  }
}

class JuiceDetailsPage extends StatefulWidget {

  const JuiceDetailsPage();

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

class _JuiceDetailsPageState extends State<JuiceDetailsPage> {
  var count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: Center(
        child: CounterWidget(
          currentCount: count,
          color: Color(0xFFF3BE39),
          onIncreaseClicked: () {
            setState(() {
              count++;
            });
          },
          onDecreaseClicked: () {
            setState(() {
              count--;
            });
          },
        ),
      ),
    );
  }
}

class CounterWidget extends StatelessWidget {
  final int currentCount;
  final Color color;
  final VoidCallback? onIncreaseClicked;
  final VoidCallback? onDecreaseClicked;
  final textStyle = TextStyle(color: Colors.white, fontWeight: FontWeight.w700, fontSize: 18);

  CounterWidget({
    required this.currentCount,
    required this.color,
    this.onIncreaseClicked,
    this.onDecreaseClicked,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 52,
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(18),
        border: Border.all(color: Colors.white),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          SizedBox(width: 16),
          GestureDetector(
            child: Icon(Icons.remove, color: Colors.white),
            onTap: onDecreaseClicked,
          ),
          SizedBox(width: 10),
          Text(
            currentCount.toString(),
            style: textStyle,
          ),
          SizedBox(width: 10),
          GestureDetector(
            child: Icon(Icons.add, color: Colors.white),
            onTap: onIncreaseClicked,
          ),
          SizedBox(width: 16),
        ],
      ),
    );
  }
}

Screen.Recording.2021-09-03.at.17.24.36.mov