Flutter Widgets Complete Guide

Flutter-ൽ ഉള്ള എല്ലാ പ്രധാന widgets-ന്റെയും വിശദമായ guide

Basic Widgets
Container
Container
Layout container widget. Padding, margin, decoration എന്നിവ സെറ്റ് ചെയ്യാൻ ഉപയോഗിക്കുന്നു.
Container( width: 100, height: 100, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(10), ), child: Text('Hello'), )
Text
Sample Text Widget
Text display ചെയ്യാൻ ഉപയോഗിക്കുന്ന widget. Style, color, size എന്നിവ customize ചെയ്യാം.
Text( 'Hello World', style: TextStyle( fontSize: 24, fontWeight: FontWeight.bold, color: Colors.blue, ), )
Image
IMG
Images display ചെയ്യാൻ ഉപയോഗിക്കുന്നു. Asset, network, file images support ചെയ്യുന്നു.
Image.asset('assets/image.png') Image.network('https://example.com/image.jpg') Image.file(File('path/to/image.jpg'))
Icon
★ ♥ ⚙ 📱
Icons display ചെയ്യാൻ ഉപയോഗിക്കുന്നു. Material icons built-in ആയി കിട്ടും.
Icon( Icons.home, size: 30, color: Colors.blue, )
Interactive Elements
ElevatedButton
Shadow effect ഉള്ള button. Primary actions-നു ഉപയോഗിക്കുന്നു.
ElevatedButton( onPressed: () => print('Pressed'), child: Text('Click Me'), )
TextButton
Simple text button. Secondary actions-നു ഉപയോഗിക്കുന്നു.
TextButton( onPressed: () {}, child: Text('Text Button'), )
OutlinedButton
Border ഉള്ള button. Alternative actions-നു ഉപയോഗിക്കുന്നു.
OutlinedButton( onPressed: () {}, child: Text('Outlined'), )
TextField
Text input field. User input എടുക്കാൻ ഉപയോഗിക്കുന്നു.
TextField( decoration: InputDecoration( labelText: 'Enter Name', border: OutlineInputBorder(), ), )
Checkbox
Boolean selection-നു ഉപയോഗിക്കുന്നു. True/false values-നു.
Checkbox( value: isChecked, onChanged: (value) { setState(() => isChecked = value); }, )
Switch
Toggle switch. Settings enable/disable ചെയ്യാൻ ഉപയോഗിക്കുന്നു.
Switch( value: isSwitched, onChanged: (value) { setState(() => isSwitched = value); }, )
Slider
Range value select ചെയ്യാൻ. Volume, brightness controls-നു ഉപയോഗിക്കുന്നു.
Slider( value: currentValue, min: 0, max: 100, onChanged: (value) { setState(() => currentValue = value); }, )
DropdownButton
Dropdown menu. Multiple options-ൽ നിന്ന് select ചെയ്യാൻ.
DropdownButton<String>( value: selectedValue, items: ['Option 1', 'Option 2'] .map((e) => DropdownMenuItem( value: e, child: Text(e))) .toList(), onChanged: (value) => setState(() {}), )
Layout Widgets
Column
Item 1
Item 2
Item 3
Vertical layout. Children widgets വെർട്ടിക്കലായി arrange ചെയ്യുന്നു.
Column( children: [ Text('Item 1'), Text('Item 2'), Text('Item 3'), ], )
Row
A
B
C
Horizontal layout. Children widgets horizontally arrange ചെയ്യുന്നു.
Row( children: [ Icon(Icons.home), Text('Home'), Icon(Icons.arrow_forward), ], )
ListView
List Item 1
List Item 2
List Item 3
List Item 4
Scrollable list. വലിയ data lists display ചെയ്യാൻ ഉപയോഗിക്കുന്നു.
ListView( children: [ ListTile(title: Text('Item 1')), ListTile(title: Text('Item 2')), ListTile(title: Text('Item 3')), ], )
GridView
1
2
3
4
5
6
Grid layout. Items grid format-ൽ display ചെയ്യുന്നു.
GridView.count( crossAxisCount: 2, children: [ Container(color: Colors.red), Container(color: Colors.blue), Container(color: Colors.green), ], )
Stack
Overlapping layout. Widgets overlapping ആയി arrange ചെയ്യുന്നു.
Stack( children: [ Container(color: Colors.blue), Positioned( top: 20, left: 20, child: Container(color: Colors.red), ), ], )
Card
Card Title
Card content goes here
Material design card. Content organize ചെയ്യാൻ ഉപയോഗിക്കുന്നു.
Card( child: Padding( padding: EdgeInsets.all(16), child: Column( children: [ Text('Card Title'), Text('Card Content'), ], ), ), )
Navigation & Structure
AppBar
App Title
App top navigation bar. Title, actions എന്നിവ display ചെയ്യുന്നു.
AppBar( title: Text('My App'), actions: [ IconButton( icon: Icon(Icons.settings), onPressed: () {}, ), ], )
Drawer
Menu
🏠 Home
📧 Messages
⚙ Settings
Side navigation menu. Hidden menu items access ചെയ്യാൻ.
Drawer( child: ListView( children: [ DrawerHeader(child: Text('Menu')), ListTile( leading: Icon(Icons.home), title: Text('Home'), onTap: () {}, ), ], ), )
BottomNavigationBar
🏠 🔍 👤
Bottom navigation tabs. Main sections navigate ചെയ്യാൻ.
BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Home', ), BottomNavigationBarItem( icon: Icon(Icons.search), label: 'Search', ), ], )
Scaffold
AppBar
Body Content
Bottom Nav
Basic page structure. AppBar, body, bottomNavigationBar എന്നിവ provide ചെയ്യുന്നു.
Scaffold( appBar: AppBar(title: Text('Title')), body: Center(child: Text('Content')), bottomNavigationBar: BottomNavigationBar( items: [...], ), )
Dialog & Overlays
AlertDialog
Alert Title

Alert message content

Alert popup dialog. User confirmation, information display ചെയ്യാൻ.
showDialog( context: context, builder: (context) => AlertDialog( title: Text('Alert'), content: Text('This is an alert message'), actions: [ TextButton( onPressed: () => Navigator.pop(context), child: Text('OK'), ), ], ), )
BottomSheet
Bottom Sheet Content
Bottom sliding panel. Additional options, details കാണിക്കാൻ.
showModalBottomSheet( context: context, builder: (context) => Container( padding: EdgeInsets.all(20), child: Column( mainAxisSize: MainSize.min, children: [ Text('Bottom Sheet'), ElevatedButton( onPressed: () => Navigator.pop(context), child: Text('Close'), ), ], ), ), )
SnackBar
✓ Message sent successfully
Temporary message notification. Success, error messages കാണിക്കാൻ.
ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text('Message sent!'), duration: Duration(seconds: 2), action: SnackBarAction( label: 'UNDO', onPressed: () {}, ), ), )
Tooltip
Tooltip text
Hover information popup. Additional info കാണിക്കാൻ.
Tooltip( message: 'This is a tooltip', child: IconButton( icon: Icon(Icons.info), onPressed: () {}, ), )
Advanced Widgets
PageView
Page 1 of 3
Page swiping widget. Onboarding, image gallery എന്നിവയ്ക്ക് ഉപയോഗിക്കുന്നു.
PageView( children: [ Container(color: Colors.red), Container(color: Colors.blue), Container(color: Colors.green), ], )
TabBar & TabBarView
Tab 1 Tab 2 Tab 3
Content for Tab 1
Tab navigation. Different categories content organize ചെയ്യാൻ.
TabBar( tabs: [ Tab(text: 'Tab 1'), Tab(text: 'Tab 2'), Tab(text: 'Tab 3'), ], ) TabBarView( children: [ Center(child: Text('Content 1')), Center(child: Text('Content 2')), Center(child: Text('Content 3')), ], )
FloatingActionButton
+
Floating action button. Primary action button ആയി ഉപയോഗിക്കുന്നു.
FloatingActionButton( onPressed: () {}, child: Icon(Icons.add), backgroundColor: Colors.red, )
FutureBuilder
🔄 Loading...
Async data loading
Async data handling. Future operations-ന്റെ result display ചെയ്യാൻ.
FutureBuilder<String>( future: fetchData(), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return CircularProgressIndicator(); } if (snapshot.hasError) { return Text('Error: ${snapshot.error}'); } return Text('Data: ${snapshot.data}'); }, )
StreamBuilder
📡 Real-time data
Stream: 42
Stream data handling. Real-time data updates display ചെയ്യാൻ.
StreamBuilder<int>( stream: numberStream, builder: (context, snapshot) { if (snapshot.hasData) { return Text('Count: ${snapshot.data}'); } return CircularProgressIndicator(); }, )
Hero
Page 1
Page 2
Hero animation. Pages between smooth transition animation.
Hero( tag: 'hero-image', child: Image.asset('image.png'), ) // Next page Hero( tag: 'hero-image', child: Image.asset('image.png'), )
AnimatedContainer
Click to animate
Animated container. Properties change ചെയ്യുമ്പോൾ smooth animation.
AnimatedContainer( duration: Duration(seconds: 1), width: isExpanded ? 200 : 100, height: isExpanded ? 200 : 100, color: isExpanded ? Colors.blue : Colors.red, child: FlutterLogo(), )
Expanded & Flexible
Expanded 1
Expanded 2
Fixed
Space distribution. Available space children widgets-ന് distribute ചെയ്യുന്നു.
Row( children: [ Expanded( flex: 1, child: Container(color: Colors.blue), ), Expanded( flex: 2, child: Container(color: Colors.red), ), Container(width: 50, color: Colors.green), ], )
Input & Form Widgets
Form
Form validation. Multiple input fields validation ചെയ്യാൻ.
Form( key: _formKey, child: Column( children: [ TextFormField( validator: (value) { if (value == null || value.isEmpty) { return 'Please enter some text'; } return null; }, ), ElevatedButton( onPressed: () { if (_formKey.currentState!.validate()) { // Process form } }, child: Text('Submit'), ), ], ), )
Radio


Single selection. Multiple options-ൽ നിന്ന് ഒന്ന് മാത്രം select ചെയ്യാൻ.
Radio<int>( value: 1, groupValue: selectedValue, onChanged: (value) { setState(() { selectedValue = value; }); }, )
DatePicker
July 2025
S
M
T
W
T
F
S
24
25
26
27
28
29
30
Date selection. Calendar popup-ൽ നിന്ന് date pick ചെയ്യാൻ.
showDatePicker( context: context, initialDate: DateTime.now(), firstDate: DateTime(2020), lastDate: DateTime(2030), ).then((selectedDate) { if (selectedDate != null) { // Handle selected date } });
TimePicker
2:30
Time selection. Clock interface-ൽ നിന്ന് time pick ചെയ്യാൻ.
showTimePicker( context: context, initialTime: TimeOfDay.now(), ).then((selectedTime) { if (selectedTime != null) { // Handle selected time } });
Styling & Theme Widgets
Theme
Light Theme
🌞
Dark Theme
🌙
App theme management. Colors, fonts, styles app-wide apply ചെയ്യാൻ.
Theme( data: ThemeData( primarySwatch: Colors.blue, brightness: Brightness.light, fontFamily: 'Roboto', ), child: MyApp(), )
Material
Material Design
Elevation & Shadow
Material design component. Elevation, color, shape properties.
Material( elevation: 4, borderRadius: BorderRadius.circular(8), color: Colors.white, child: Container( padding: EdgeInsets.all(16), child: Text('Material Widget'), ), )
Padding
Padded Content
Padding add ചെയ്യാൻ. Child widget-ന് spacing provide ചെയ്യുന്നു.
Padding( padding: EdgeInsets.all(16), child: Text('Padded text'), ) // Different padding options EdgeInsets.symmetric(horizontal: 16, vertical: 8) EdgeInsets.only(left: 16, top: 8)
Center
Centered
Center alignment. Child widget center-ൽ position ചെയ്യുന്നു.
Center( child: Text('Centered Text'), ) // Alternative using Align Align( alignment: Alignment.center, child: Text('Aligned Text'), )
Custom & Advanced Widgets
CustomPaint
Custom drawing. Charts, graphics, custom shapes draw ചെയ്യാൻ.
CustomPaint( size: Size(200, 200), painter: MyCustomPainter(), ) class MyCustomPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { final paint = Paint() ..color = Colors.blue ..strokeWidth = 2; canvas.drawLine( Offset(0, 0), Offset(size.width, size.height), paint ); } }
GestureDetector
👆 Touch Me!
Gesture handling. Tap, drag, pinch, swipe gestures detect ചെയ്യാൻ.
GestureDetector( onTap: () => print('Tapped!'), onDoubleTap: () => print('Double tapped!'), onLongPress: () => print('Long pressed!'), onPanUpdate: (details) => print('Dragging'), child: Container( width: 100, height: 100, color: Colors.blue, child: Center(child: Text('Touch me')), ), )
InkWell
Material Ripple Effect
Material ripple effect. Touch feedback with animation.
InkWell( onTap: () => print('InkWell tapped'), splashColor: Colors.blue.withOpacity(0.3), borderRadius: BorderRadius.circular(8), child: Container( padding: EdgeInsets.all(16), child: Text('Tap for ripple effect'), ), )
ClipRRect
Rounded corners clipping. Images, containers-ന് rounded corners.
ClipRRect( borderRadius: BorderRadius.circular(20), child: Image.network( 'https://example.com/image.jpg', width: 100, height: 100, fit: BoxFit.cover, ), )
Opacity
100%
70%
30%
Transparency control. Widget opacity adjust ചെയ്യാൻ.
Opacity( opacity: 0.5, // 0.0 to 1.0 child: Container( width: 100, height: 100, color: Colors.blue, child: Center(child: Text('50% Opacity')), ), )
Transform
Normal
Rotated
Scaled
Widget transformation. Rotate, scale, translate ചെയ്യാൻ.
Transform.rotate( angle: 0.785, // 45 degrees in radians child: Container(color: Colors.red), ) Transform.scale( scale: 1.5, child: Text('Scaled Text'), ) Transform.translate( offset: Offset(10, 20), child: Icon(Icons.star), )
Performance & Optimization Widgets
ListView.builder
Item 1 📱
Item 2 🚀
Item 3 ⚡
...1000+ items
Efficient scrolling list. വലിയ lists-ന് memory efficient rendering.
ListView.builder( itemCount: 1000, itemBuilder: (context, index) { return ListTile( title: Text('Item $index'), subtitle: Text('Description for item $index'), leading: CircleAvatar(child: Text('$index')), ); }, )
GridView.builder
📱 1
🚀 2
⚡ 3
🎯 4
💡 5
🔥 6
Efficient grid layout. Large grid data-യ്ക്ക് optimized performance.
GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, crossAxisSpacing: 10, mainAxisSpacing: 10, ), itemCount: 100, itemBuilder: (context, index) { return Card( child: Center(child: Text('Item $index')), ); }, )
SingleChildScrollView
Scrollable content area...
More content here...
Even more content...
Keep scrolling...
Bottom reached! 🎯
Simple scrolling. ചെറിയ content scroll ചെയ്യാൻ ഉപയോഗിക്കുന്നു.
SingleChildScrollView( child: Column( children: [ Container(height: 200, color: Colors.red), Container(height: 200, color: Colors.blue), Container(height: 200, color: Colors.green), // More widgets... ], ), )
RefreshIndicator
🔄
Pull to refresh content
Pull-to-refresh. Content refresh ചെയ്യാൻ pull gesture.
RefreshIndicator( onRefresh: () async { // Refresh data from API await Future.delayed(Duration(seconds: 2)); setState(() { // Update your data }); }, child: ListView( children: [ // Your list items ], ), )
State Management Widgets
ValueListenableBuilder
Counter: 0
Value changes listen ചെയ്യാൻ. Specific value updates-ന് UI rebuild.
ValueNotifier<int> counter = ValueNotifier(0); ValueListenableBuilder<int>( valueListenable: counter, builder: (context, value, child) { return Text('Count: $value'); }, ) // Update value counter.value++;
Consumer (Provider)
🔄 State Consumer
Listens to Provider changes
Provider state consume ചെയ്യാൻ. Global state management-നു.
Consumer<CounterModel>( builder: (context, counter, child) { return Text('${counter.count}'); }, ) // With Provider package Provider.of<CounterModel>(context).increment();
BlocBuilder
🧊 BLoC Builder
Business Logic Component
BLoC pattern implementation. Complex state management-നു.
BlocBuilder<CounterBloc, CounterState>( builder: (context, state) { if (state is CounterLoading) { return CircularProgressIndicator(); } if (state is CounterLoaded) { return Text('Count: ${state.count}'); } return Text('Error'); }, )
StatefulBuilder
Local State: Off
Local state management. Dialog, popup-കളിൽ state handle ചെയ്യാൻ.
StatefulBuilder( builder: (context, setState) { return Checkbox( value: isChecked, onChanged: (value) { setState(() { isChecked = value!; }); }, ); }, )
Animation Widgets
AnimatedOpacity
Click to fade
Fade animation. Opacity changes-ന് smooth transition.
AnimatedOpacity( opacity: isVisible ? 1.0 : 0.0, duration: Duration(seconds: 1), child: Container( width: 100, height: 100, color: Colors.blue, ), )
AnimatedPositioned
Position animation. Stack-ൽ position changes animate ചെയ്യാൻ.
Stack( children: [ AnimatedPositioned( duration: Duration(seconds: 1), left: isLeft ? 0 : 200, top: isTop ? 0 : 200, child: Container( width: 50, height: 50, color: Colors.red, ), ), ], )
SlideTransition
Slide In
Slide animation. Elements slide in/out ചെയ്യാൻ.
SlideTransition( position: Tween<Offset>( begin: Offset(-1.0, 0.0), end: Offset.zero, ).animate(animationController), child: Container( width: 100, height: 100, color: Colors.green, ), )
RotationTransition
Rotation animation. Elements rotate ചെയ്യാൻ smooth animation.
RotationTransition( turns: Tween(begin: 0.0, end: 1.0) .animate(animationController), child: Icon( Icons.refresh, size: 50, ), )

Flutter Widgets Complete Guide

ഈ comprehensive guide-ൽ Flutter-ന്റെ 60+ widgets ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. Basic widgets മുതൽ advanced animations വരെ എല്ലാം visual examples-നോടൊപ്പം!

11 Categories
Organized by functionality
60+ Widgets
Complete coverage
Interactive Demos
Click to see animations
Production Ready
Copy-paste code samples
Performance Tips
Optimized implementations
State Management
Modern patterns included

🚀 Next Steps for Learning

📱 Build sample apps using these widgets
🎨 Learn custom theming and styling
🔄 Master state management patterns
⚡ Practice animation combinations
🌐 Integrate with APIs and databases
📦 Create reusable widget packages
Specialized & Platform Widgets
WebView
🌐 https://flutter.dev
Flutter Documentation
Learn Flutter development with comprehensive guides...
Web content display. App-ൽ web pages embed ചെയ്യാൻ.
// Add webview_flutter package WebView( initialUrl: 'https://flutter.dev', javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController webViewController) { _controller.complete(webViewController); }, )
CupertinoButton
iOS style button. Apple design guidelines അനുസരിച്ചുള്ള button.
CupertinoButton( color: CupertinoColors.activeBlue, child: Text('iOS Button'), onPressed: () { print('Cupertino button pressed'); }, ) CupertinoButton.filled( child: Text('Filled Button'), onPressed: () {}, )
CupertinoSwitch
iOS style switch. Apple design-ന്റെ toggle switch.
CupertinoSwitch( value: isSwitched, activeColor: CupertinoColors.activeGreen, onChanged: (value) { setState(() { isSwitched = value; }); }, )
Platform Widget
Android
iOS
Platform adaptive widgets. Android/iOS-ന് different UI.
Platform.isIOS ? CupertinoButton( child: Text('iOS Button'), onPressed: () {}, ) : ElevatedButton( child: Text('Android Button'), onPressed: () {}, ) // Using platform package PlatformButton( child: Text('Adaptive Button'), onPressed: () {}, )
DraggableScrollableSheet
Drag to expand
Draggable bottom sheet. Expandable panel drag ചെയ്തു resize ചെയ്യാൻ.
DraggableScrollableSheet( initialChildSize: 0.3, minChildSize: 0.1, maxChildSize: 0.9, builder: (context, scrollController) { return Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.vertical(top: Radius.circular(20)), ), child: ListView.builder( controller: scrollController, itemCount: 20, itemBuilder: (context, index) => ListTile( title: Text('Item $index'), ), ), ); }, )
Stepper
Step 1: Complete
2
Step 2: Active
3
Step 3: Pending
Step-by-step process. Multi-step forms, wizards create ചെയ്യാൻ.
Stepper( currentStep: currentStep, onStepTapped: (step) => setState(() => currentStep = step), steps: [ Step( title: Text('Step 1'), content: Text('First step content'), isActive: currentStep >= 0, ), Step( title: Text('Step 2'), content: Text('Second step content'), isActive: currentStep >= 1, ), Step( title: Text('Step 3'), content: Text('Final step content'), isActive: currentStep >= 2, ), ], )
Media & File Handling Widgets
VideoPlayer
▶️
Video playback. App-ൽ videos play ചെയ്യാൻ ഉപയോഗിക്കുന്നു.
// Add video_player package VideoPlayerController _controller = VideoPlayerController.network( 'https://sample-videos.com/video.mp4' ); VideoPlayer(_controller) // With controls Chewie( controller: ChewieController( videoPlayerController: _controller, autoPlay: true, looping: true, ), )
ImagePicker
📷
Tap to pick image
Image selection. Gallery/camera-യിൽ നിന്ന് images pick ചെയ്യാൻ.
// Add image_picker package final ImagePicker _picker = ImagePicker(); // Pick from gallery final XFile? image = await _picker.pickImage( source: ImageSource.gallery ); // Pick from camera final XFile? photo = await _picker.pickImage( source: ImageSource.camera ); if (image != null) { File imageFile = File(image.path); // Use the selected image }
FilePicker
📄 document.pdf
🖼️ image.jpg
File selection. Various file types pick ചെയ്യാൻ ഉപയോഗിക്കുന്നു.
// Add file_picker package FilePickerResult? result = await FilePicker.platform.pickFiles( type: FileType.custom, allowedExtensions: ['jpg', 'pdf', 'doc'], ); if (result != null) { File file = File(result.files.single.path!); String fileName = result.files.single.name; int fileSize = result.files.single.size; }
CachedNetworkImage
cached
IMG
Cached image loading. Network images cache ചെയ്തു performance improve ചെയ്യാൻ.
// Add cached_network_image package CachedNetworkImage( imageUrl: "https://example.com/image.jpg", placeholder: (context, url) => CircularProgressIndicator(), errorWidget: (context, url, error) => Icon(Icons.error), fadeInDuration: Duration(milliseconds: 500), memCacheWidth: 300, memCacheHeight: 300, )
Utility & Helper Widgets
Visibility
Visible
Hidden
Widget visibility control. Conditionally widgets show/hide ചെയ്യാൻ.
Visibility( visible: isVisible, child: Container( width: 100, height: 100, color: Colors.blue, ), ) // Alternative with Offstage Offstage( offstage: !isVisible, child: Text('Hidden widget'), )
Spacer
Start
End
Space filler. Available space automatically fill ചെയ്യാൻ.
Row( children: [ Text('Start'), Spacer(), // Takes all available space Text('End'), ], ) // With flex property Spacer(flex: 2) // Takes 2x space
Divider
Content Above
Content Below
Visual separator. Content sections separate ചെയ്യാൻ line.
Column( children: [ Text('Section 1'), Divider( thickness: 2, color: Colors.grey, indent: 20, endIndent: 20, ), Text('Section 2'), ], ) // Vertical divider for Row VerticalDivider(width: 20, thickness: 1)
SizedBox
A
B
Fixed size spacing. Specific width/height spacing add ചെയ്യാൻ.
Column( children: [ Text('First'), SizedBox(height: 20), // 20px vertical space Text('Second'), ], ) Row( children: [ Icon(Icons.star), SizedBox(width: 10), // 10px horizontal space Text('Rating'), ], )
FractionallySizedBox
50% width
Proportional sizing. Parent size-ന്റെ percentage width/height.
FractionallySizedBox( widthFactor: 0.5, // 50% of parent width heightFactor: 0.3, // 30% of parent height child: Container( color: Colors.blue, child: Center(child: Text('50% x 30%')), ), )
SafeArea
Safe
Safe area padding. Notch, status bar areas avoid ചെയ്യാൻ.
SafeArea( child: Scaffold( appBar: AppBar(title: Text('Safe App')), body: Column( children: [ Text('Content stays in safe area'), // More widgets... ], ), ), ) // Specific edges only SafeArea( top: false, child: MyWidget(), )

Flutter Widgets Complete Guide

ഈ comprehensive guide-ൽ Flutter-ന്റെ 80+ widgets ഉൾപ്പെടുത്തിയിട്ടുണ്ട്! Basic widgets മുതൽ specialized components വരെ എല്ലാം visual examples-നോടൊപ്പം!

14 Categories
Comprehensive organization
80+ Widgets
Complete Flutter coverage
Interactive Demos
Click animations included
Production Ready
Copy-paste implementations
Platform Specific
iOS & Android widgets
Modern Patterns
Latest Flutter features

🚀 Advanced Flutter Development Path

📱 Build production-ready apps
🎨 Master custom theming & animations
🔄 Implement state management (Provider, Bloc, Riverpod)
⚡ Optimize performance & memory usage
🌐 Integrate REST APIs & GraphQL
📦 Create reusable widget packages
🧪 Write comprehensive tests
🚀 Deploy to App Store & Play Store
പ്രധാന കാര്യങ്ങൾ:
• ഓരോ widget-ന്റെയും purpose മനസ്സിലാക്കുക
• കൃത്യമായ use cases-ൽ appropriate widgets choose ചെയ്യുക
• Performance optimization-നായി efficient widgets ഉപയോഗിക്കുക
• Platform-specific design guidelines follow ചെയ്യുക
• State management patterns correctly implement ചെയ്യുക