Flutter Widgets

Flutter Widget Tree

Flutter mein sab kuch widgets ke through banaya jata hai. Jaise hum apne ghar ke liye ek tree banate hain, waise hi Flutter mein widget tree hota hai. Sabse upar ek root widget hota hai, uske andar chote widgets hote hain, aur wo bhi apne andar aur chote widgets rakhte hain. Ye tree structure decide karta hai ki humare app ka UI kaise dikhega aur kaise behave karega.

Types of Widgets

Flutter mein do tarah ke widgets hote hain: Stateless aur Stateful.

Stateless Widgets: Ye wo widgets hain jo ek baar banane ke baad change nahi hote. Jaise ek text ya icon.

Stateful Widgets: Ye wo widgets hain jo apni state ke according change hote hain. Jaise ek button jis par click karne se kuch action hota hai.

State Management Widget

State management ka matlab hai ki app ke alag-alag parts kaise communicate karte hain aur state ko manage karte hain. Popular state management techniques hain:

Provider: Ye ek simple aur powerful state management approach hai.

Riverpod: Ye Provider ka advanced version hai.

Bloc/Cubit: Ye bahut popular aur scalable method hai complex apps ke liye.

Flutter Layouts

Layouts decide karte hain ki widgets screen par kaise arrange honge. Flutter mein kai tarah ke layout widgets hote hain jaise Row, Column, Stack, Container, etc. Har ek layout widget ka apna specific role aur behavior hota hai.

Layout of a Widget

Har widget ka apna ek layout hota hai jo decide karta hai ki wo dusre widgets ke saath kaise interact karega. Jaise Padding, Margin, Alignment, etc. ka use karke hum widgets ko customize kar sakte hain.

Types of Layout Widgets

Kuch common layout widgets hain:

Container: Ye ek versatile widget hai jo padding, margin, border, aur background color set kar sakta hai.

Row: Ye horizontally widgets ko arrange karta hai.

Column: Ye vertically widgets ko arrange karta hai.

Stack: Ye widgets ko ek ke upar ek stack karta hai.

Visible And Invisible Widgets

Visible widgets wo hote hain jo directly screen par dikhte hain jaise Text, Button, Image, etc. Invisible widgets wo hote hain jo screen par directly nahi dikhte lekin functionality provide karte hain jaise SizedBox, Padding, Invisible.

Connecting Functions And Buttons

Buttons ko functions se connect karna bahut important hai. Jab hum button create karte hain, hum usme onPressed property set karte hain aur usme ek function pass karte hain jo button click hone par execute hota hai.

ElevatedButton(
  onPressed: () {
    print('Button clicked');
  },
  child: Text('Click me'),
)
        

Creating A New Custom Widget

Custom widget banana easy hai. Bas ek class create karo jo StatelessWidget ya StatefulWidget extend kare aur build method implement karo.

class MyCustomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Hello World'),
    );
  }
}
        

Styling Widgets

Widgets ko style karne ke liye TextStyle, BoxDecoration, aur Container jaise widgets ka use hota hai. Isse hum colors, fonts, borders, shadows, etc. set kar sakte hain.

Understand the Basics of Flutter UI

Flutter UI basically widgets ka combination hota hai. Har cheez widget hai, chahe wo layout ho, visible element ho ya invisible. Sab widgets milke ek hierarchical structure banate hain jise hum widget tree bolte hain.

Learn Flutter Gestures

Gestures ka matlab hai user ke interactions jaise tap, swipe, drag, etc. Flutter mein GestureDetector widget use karke hum in gestures ko handle kar sakte hain.

Mapping Lists to Widgets

List ko widgets mein convert karna common task hai. ListView.builder widget use karke hum dynamic lists bana sakte hain.

ListView.builder(
  itemCount: myList.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(myList[index]),
    );
  },
)
        

Combining Widgets

Widgets ko combine karke complex UI banayi ja sakti hai. Jaise Column aur Row ko combine karke hum multi-directional layouts bana sakte hain.

Date Format Patterns

Date format patterns use karke hum dates ko apne desired format mein display kar sakte hain. intl package ka use karke hum dates ko format aur parse kar sakte hain.

import 'package:intl/intl.dart';

String formattedDate = DateFormat('yyyy-MM-dd').format(DateTime.now());
        

Yeh tha ek overview Flutter ke basic concepts ka. Agar aapko kisi bhi topic mein aur detail chahiye ho, to please bataye!