Counter App in Flutter – SwiftUI – Jetpack Compose

Flutter :

import 'package:flutter/material.dart';

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

  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            const SizedBox(height: 8,),
            Text('current value : $counter'),

            const SizedBox(height: 8,),

            ElevatedButton(
              onPressed: () {
                setState(() {
                  counter++;
                });
              }, 
              child: const Text('Increment'),
            ),

            const SizedBox(height: 8,),

            ElevatedButton(
              onPressed: () {
                setState(() {
                  counter--;
                });
              }, 
              child: const Text('Decrement'),
            )
          ],

        ),
      ),
    );
  }
}

SwiftUI :

import SwiftUI

struct CounterView: View {
    @State var counter: Int = 0
    
    var body: some View {
        VStack {
            Text("current value: \(counter)")
            
            Button {
                counter += 1
            } label: {
                Text("Incerment")
                    .font(.system(size: 18))
                    .frame(width: 220, height: 50)
                    .background(Color.pink)
                    .foregroundColor(Color.white)
                    .cornerRadius(8)
                
            }
            
            Button {
                counter -= 1
            } label: {
                Text("Decrement")
                    .font(.system(size: 18))
                    .frame(width: 220, height: 50)
                    .background(Color.pink)
                    .foregroundColor(Color.white)
                    .cornerRadius(8)
                
            }
        }
        
    }
}

struct CounterView_Previews: PreviewProvider {
    static var previews: some View {
        CounterView()
    }
}

Jetpack Compose :

package com.example.composeuidemo.counter

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.OutlinedButton
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier


@Composable
fun CounterApp() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        val counter = remember {
            mutableStateOf(0)
        }
        Text(text = "current value: ${counter.value}")

        OutlinedButton(
            onClick = {
                counter.value++
            }
        ) {
            Text(text = "Increment")

        }

        OutlinedButton(
            onClick = {
                counter.value--
            }
        ) {
            Text(text = "Decrement")

        }

    }
}