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.