Flutter Simple Project

Tuturial Video

👉 Each element on a screen of the flutter app is a Widget

👉 Boilerplate code for flutter project :


import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light(useMaterial3: true),
      home: testttttt(),
    );
  }
}

Scaffold widget & AppBar widget

Scaffold & AppBar
Widget	properties	المصدر
Scaffold(the parent widget	appBar → AppBar() body → widget	flutter.dev
AppBar(at the top of the screen	leading → Widget title → Widget centerTitle → bool actions → List<Widget> elevation → double	flutter.dev

Text widget & TextStyle widget

To add text
Widget	properties	المصدر
Text(to add text	"data" maxLines → int overflow → TextOverflow textAlign → TextAlign textDirection → TextDirection style → TextStyle(	flutter.dev video
TextStyle(to style the text	backgroundColor → Color color → Color decoration → TextDecoration fontSize → double fontStyle → FontStyle fontWeight → FontWeight height → double letterSpacing → double wordSpacing → double fontFamily → String ⭐	TextStyle

Icon widget & IconButton widget

To add icon
Widget	properties	المصدر
Icon(to show icon	Icons.favorite color: Colors.pink size: 24.9	flutter.dev
IconButton(for clickable icon	icon: const Icon(Icons.add), onPressed: (){}	flutter.dev

👉 Final project :

👉 Download Final Project