Build Your First Flutter App: Digital Profile Card
Learn Flutter layout composition from scratch! Build a personal business card app step-by-step. Every single widget is explained with properties, deprecation warnings, modern Flutter standards, and live visual phone output.
App Entry & Screen Canvas
Setting up main(), runApp(), MaterialApp, and Scaffold
Every Flutter app begins with main() calling runApp(). We use MaterialApp to configure top-level app settings (theme, title) and Scaffold to create the visual screen structure with a custom background color.
main()The entry point function where execution begins.
runApp()Attaches the root widget tree to the device screen.
MaterialAppWrapper providing Material Design styling and routing.
ScaffoldProvides background color, body area, app bar, and screen slots.
backgroundColorSets the background fill color of the entire screen.
Modern Flutter best practice: Add `const` constructors to widgets that don't change, and extract screen logic into a separate `StatelessWidget` (like `ProfileScreen`) rather than placing everything inside `MyApp`.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: ProfileScreen(),
);
}
}
class ProfileScreen extends StatelessWidget {
const ProfileScreen({super.key});
@override
Widget build(BuildContext context) {
return const Scaffold(
backgroundColor: Colors.teal,
body: Center(
child: Text('Screen Ready!'),
),
);
}
}Screen Ready!
Scaffold background colored teal
Flutter Profile Project — Widget Cheat Sheet
Quick summary of all 10 core Flutter widgets used in this project:
Root app wrapper configuring themes, routes, and Material Design guidelines.
Standard screen layout container providing background colors, app bars, and body slots.
Padding wrapper preventing content from overlapping notches, status bars, and home bars.
Flex layout displaying children in a top-to-bottom vertical line.
Circular container ideal for displaying user profile photos or initials.
Renders single-style text strings with custom font sizes, weights, and colors.
Enforces specific width and height dimensions on its child widget.
Horizontal rule line used as a visual separator between sections.
Material panel with rounded corners, margin padding, and elevation drop-shadow.
Pre-styled single row containing leading icon, title text, and trailing actions.
Ready to build interactive layouts visually?
Now that you've built your first profile project, head to Widget City to practice Container, Row, Column, and Stack in interactive mini-games!