Create Button with Image in Flutter – SwiftUI – Compose

mobile academy

Flutter:


import 'package:flutter/material.dart';

class CustomButtonWithIcon extends StatelessWidget {
  const CustomButtonWithIcon({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton.icon(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.pink,
        foregroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8)
        )
      ),
      onPressed: () {

      }, 
      icon: const Icon(Icons.edit), 
      label: const Text("Edit"),
    );
  }
}

SwiftUI:

import SwiftUI

struct ButtonWithIconView: View {
    var body: some View {
        Button {
            print("button clicked")
        } label: {
            Label("Edit", systemImage: "pencil")
                .font(.system(size: 18))
                .frame(width: 220, height: 50)
                .background(Color.pink)
                .foregroundColor(Color.white)
                .cornerRadius(8)    
        }

    }
}

struct ButtonWithIconView_Previews: PreviewProvider {
    static var previews: some View {
        ButtonWithIconView()
    }
}

Compose:

@Composable
fun CustomButtonWithIcon(label: String, icon: ImageVector) {
    Button(
        colors = ButtonDefaults.buttonColors(
            backgroundColor = Color.Red,
            contentColor = Color.White
        ),
        modifier = Modifier
            .clip(RoundedCornerShape(8))
            .width(220.dp)
            .padding(8.dp),

        onClick = {

        }
    ) {
        Icon(imageVector = icon , contentDescription = "Edit")
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
        Text(text = label)

    }
}
Select your currency
INR Indian rupee