build a Mini Business Card App using the widgets (Text, Container, Row, Column, Image, Button)

Let’s build a Mini Business Card App using the widgets you just learned (Text, Container, Row, Column, Image, Button).

This will give you a real app-like UI to practice.


Business Card App (Flutter Example)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.blueGrey[900],
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Profile Image
              const CircleAvatar(
                radius: 60,
                backgroundImage: NetworkImage(
                  "https://picsum.photos/200", // you can replace with your own photo
                ),
              ),

              const SizedBox(height: 20),

              // Name
              const Text(
                "Aditya Kumar Singh",
                style: TextStyle(
                  fontSize: 28,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),

              // Job Title
              const Text(
                "Flutter Developer",
                style: TextStyle(
                  fontSize: 18,
                  color: Colors.white70,
                  letterSpacing: 2.0,
                ),
              ),

              const SizedBox(height: 30),

              // Contact Card - Phone
              Card(
                margin: const EdgeInsets.symmetric(horizontal: 25, vertical: 10),
                child: ListTile(
                  leading: const Icon(Icons.phone, color: Colors.blueGrey),
                  title: const Text(
                    "+91 9555699081",
                    style: TextStyle(fontSize: 18),
                  ),
                ),
              ),

              // Contact Card - Email
              Card(
                margin: const EdgeInsets.symmetric(horizontal: 25, vertical: 10),
                child: ListTile(
                  leading: const Icon(Icons.email, color: Colors.blueGrey),
                  title: const Text(
                    "adityaypi@yahoo.com",
                    style: TextStyle(fontSize: 18),
                  ),
                ),
              ),

              const SizedBox(height: 20),

              // Button
              ElevatedButton(
                onPressed: () {
                  print("Hire Me Button Pressed!");
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.amber,
                  padding:
                      const EdgeInsets.symmetric(horizontal: 30, vertical: 15),
                ),
                child: const Text(
                  "Hire Me",
                  style: TextStyle(fontSize: 18, color: Colors.black),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Features in This Mini App

Profile Picture (CircleAvatar)
Name + Job Title
Contact info (Phone & Email in nice cards)
“Hire Me” button

This app already looks like a professional mini portfolio card.




Leave a Reply