Untitled

import 'package:flutter/material.dart';

class InputPage extends StatefulWidget {
  const InputPage({Key? key}) : super(key: key);

  @override
  State<InputPage> createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  int tinggi = 183;
  int berat = 60;
  int usia = 24;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
        centerTitle: true,
        leading: Icon(Icons.menu),
      ),
      body: Center(
        child: Column(
          children: [
            //column 1
            Row(
              children: [
                Expanded(
                  child: Container(
                    padding: EdgeInsets.all(8),
                    margin: EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      color: kActiveCardColour,
                    ),
                    child: Column(
                      children: [
                        Icon(
                          Icons.male,
                          size: 80,
                        ),
                        Text(
                          'Laki-laki',
                          style: kLabelTextStyle,
                        ),
                      ],
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    padding: EdgeInsets.all(8),
                    margin: EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      color: kActiveCardColour,
                    ),
                    child: Column(
                      children: [
                        Icon(
                          Icons.female,
                          size: 80,
                        ),
                        Text(
                          'Perempuan',
                          style: kLabelTextStyle,
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            //column 2
            Container(
              margin: EdgeInsets.all(8),
              padding: EdgeInsets.all(8),
              decoration: BoxDecoration(
                color: kActiveCardColour,
              ),
              child: Column(
                children: [
                  Text(
                    'Tinggi',
                    style: kLabelTextStyle,
                  ),
                  Text(
                    '$tinggi',
                    style: kNumberTextStyle,
                  ),
                  SliderTheme(
                    data: SliderTheme.of(context).copyWith(
                      inactiveTrackColor: Color(0xFF8D8E98),
                      activeTrackColor: Colors.white,
                      thumbColor: Color(0xFFEB1555),
                      overlayColor: Color(0x29EB1555),
                      thumbShape:
                          RoundSliderThumbShape(enabledThumbRadius: 15.0),
                      overlayShape:
                          RoundSliderOverlayShape(overlayRadius: 30.0),
                    ),
                    child: Slider(
                      value: tinggi.toDouble(),
                      min: 120.0,
                      max: 220.0,
                      onChanged: (double newValue) {
                        setState(() {
                          tinggi = newValue.round();
                        });
                      },
                    ),
                  ),
                ],
              ),
            ),
            //column 3
            Container(
              margin: EdgeInsets.all(8),
              padding: EdgeInsets.all(8),
              decoration: BoxDecoration(
                color: kActiveCardColour,
              ),
              child: Column(
                children: [
                  Text(
                    'Berat',
                    style: kLabelTextStyle,
                  ),
                  Text(
                    '$berat',
                    style: kNumberTextStyle,
                  ),
                  Row(
                    children: [
                      Expanded(
                        child: MaterialButton(
                          onPressed: () {
                            setState(() {
                              berat++;
                            });
                          },
                          color: kBottomContainerColour,
                          textColor: Colors.white,
                          child: Icon(
                            Icons.add,
                            size: 24,
                          ),
                          padding: EdgeInsets.all(16),
                          shape: CircleBorder(),
                        ),
                      ),
                      Expanded(
                        child: MaterialButton(
                          onPressed: () {
                            setState(() {
                              berat--;
                            });
                          },
                          color: kBottomContainerColour,
                          textColor: Colors.white,
                          child: Icon(
                            Icons.remove,
                            size: 24,
                          ),
                          padding: EdgeInsets.all(16),
                          shape: CircleBorder(),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),

            //column 4
          ],
        ),
      ),
    );
  }
}