Flutter Widgets Complete Guide

Container( width: 100, height: 100, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(10), ), child: Text('Hello'), )

Text( 'Hello World', style: TextStyle( fontSize: 24, fontWeight: FontWeight.bold, color: Colors.blue, ), )

Image.asset('assets/image.png') Image.network('https://example.com/image.jpg') Image.file(File('path/to/image.jpg'))

Icon( Icons.home, size: 30, color: Colors.blue, )

ElevatedButton( onPressed: () => print('Pressed'), child: Text('Click Me'), )

TextButton( onPressed: () {}, child: Text('Text Button'), )

OutlinedButton( onPressed: () {}, child: Text('Outlined'), )

TextField( decoration: InputDecoration( labelText: 'Enter Name', border: OutlineInputBorder(), ), )

Checkbox( value: isChecked, onChanged: (value) { setState(() => isChecked = value); }, )

Switch( value: isSwitched, onChanged: (value) { setState(() => isSwitched = value); }, )

Slider( value: currentValue, min: 0, max: 100, onChanged: (value) { setState(() => currentValue = value); }, )

DropdownButton<String>( value: selectedValue, items: ['Option 1', 'Option 2'] .map((e) => DropdownMenuItem( value: e, child: Text(e))) .toList(), onChanged: (value) => setState(() {}), )

Column( children: [ Text('Item 1'), Text('Item 2'), Text('Item 3'), ], )

Row( children: [ Icon(Icons.home), Text('Home'), Icon(Icons.arrow_forward), ], )

ListView( children: [ ListTile(title: Text('Item 1')), ListTile(title: Text('Item 2')), ListTile(title: Text('Item 3')), ], )

GridView.count( crossAxisCount: 2, children: [ Container(color: Colors.red), Container(color: Colors.blue), Container(color: Colors.green), ], )

Stack( children: [ Container(color: Colors.blue), Positioned( top: 20, left: 20, child: Container(color: Colors.red), ), ], )

Card( child: Padding( padding: EdgeInsets.all(16), child: Column( children: [ Text('Card Title'), Text('Card Content'), ], ), ), )

AppBar( title: Text('My App'), actions: [ IconButton( icon: Icon(Icons.settings), onPressed: () {}, ), ], )

Drawer( child: ListView( children: [ DrawerHeader(child: Text('Menu')), ListTile( leading: Icon(Icons.home), title: Text('Home'), onTap: () {}, ), ], ), )

BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Home', ), BottomNavigationBarItem( icon: Icon(Icons.search), label: 'Search', ), ], )

Scaffold( appBar: AppBar(title: Text('Title')), body: Center(child: Text('Content')), bottomNavigationBar: BottomNavigationBar( items: [...], ), )

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'), ), ], ), )

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'), ), ], ), ), )

ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text('Message sent!'), duration: Duration(seconds: 2), action: SnackBarAction( label: 'UNDO', onPressed: () {}, ), ), )

Tooltip( message: 'This is a tooltip', child: IconButton( icon: Icon(Icons.info), onPressed: () {}, ), )

PageView( children: [ Container(color: Colors.red), Container(color: Colors.blue), Container(color: Colors.green), ], )

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( onPressed: () {}, child: Icon(Icons.add), backgroundColor: Colors.red, )

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<int>( stream: numberStream, builder: (context, snapshot) { if (snapshot.hasData) { return Text('Count: ${snapshot.data}'); } return CircularProgressIndicator(); }, )

Hero( tag: 'hero-image', child: Image.asset('image.png'), ) // Next page Hero( tag: 'hero-image', child: Image.asset('image.png'), )

AnimatedContainer( duration: Duration(seconds: 1), width: isExpanded ? 200 : 100, height: isExpanded ? 200 : 100, color: isExpanded ? Colors.blue : Colors.red, child: FlutterLogo(), )

Row( children: [ Expanded( flex: 1, child: Container(color: Colors.blue), ), Expanded( flex: 2, child: Container(color: Colors.red), ), Container(width: 50, color: Colors.green), ], )

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<int>( value: 1, groupValue: selectedValue, onChanged: (value) { setState(() { selectedValue = value; }); }, )

showDatePicker( context: context, initialDate: DateTime.now(), firstDate: DateTime(2020), lastDate: DateTime(2030), ).then((selectedDate) { if (selectedDate != null) { // Handle selected date } });

showTimePicker( context: context, initialTime: TimeOfDay.now(), ).then((selectedTime) { if (selectedTime != null) { // Handle selected time } });

Theme( data: ThemeData( primarySwatch: Colors.blue, brightness: Brightness.light, fontFamily: 'Roboto', ), child: MyApp(), )

Material( elevation: 4, borderRadius: BorderRadius.circular(8), color: Colors.white, child: Container( padding: EdgeInsets.all(16), child: Text('Material Widget'), ), )

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( child: Text('Centered Text'), ) // Alternative using Align Align( alignment: Alignment.center, child: Text('Aligned Text'), )

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( 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( 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( borderRadius: BorderRadius.circular(20), child: Image.network( 'https://example.com/image.jpg', width: 100, height: 100, fit: BoxFit.cover, ), )

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.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), )

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( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, crossAxisSpacing: 10, mainAxisSpacing: 10, ), itemCount: 100, itemBuilder: (context, index) { return Card( child: Center(child: Text('Item $index')), ); }, )

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( onRefresh: () async { // Refresh data from API await Future.delayed(Duration(seconds: 2)); setState(() { // Update your data }); }, child: ListView( children: [ // Your list items ], ), )

ValueNotifier<int> counter = ValueNotifier(0); ValueListenableBuilder<int>( valueListenable: counter, builder: (context, value, child) { return Text('Count: $value'); }, ) // Update value counter.value++;

Consumer<CounterModel>( builder: (context, counter, child) { return Text('${counter.count}'); }, ) // With Provider package Provider.of<CounterModel>(context).increment();

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( builder: (context, setState) { return Checkbox( value: isChecked, onChanged: (value) { setState(() { isChecked = value!; }); }, ); }, )

AnimatedOpacity( opacity: isVisible ? 1.0 : 0.0, duration: Duration(seconds: 1), child: Container( width: 100, height: 100, color: Colors.blue, ), )

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( position: Tween<Offset>( begin: Offset(-1.0, 0.0), end: Offset.zero, ).animate(animationController), child: Container( width: 100, height: 100, color: Colors.green, ), )

RotationTransition( turns: Tween(begin: 0.0, end: 1.0) .animate(animationController), child: Icon( Icons.refresh, size: 50, ), )

// Add webview_flutter package WebView( initialUrl: 'https://flutter.dev', javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController webViewController) { _controller.complete(webViewController); }, )

CupertinoButton( color: CupertinoColors.activeBlue, child: Text('iOS Button'), onPressed: () { print('Cupertino button pressed'); }, ) CupertinoButton.filled( child: Text('Filled Button'), onPressed: () {}, )

CupertinoSwitch( value: isSwitched, activeColor: CupertinoColors.activeGreen, onChanged: (value) { setState(() { isSwitched = value; }); }, )

Platform.isIOS ? CupertinoButton( child: Text('iOS Button'), onPressed: () {}, ) : ElevatedButton( child: Text('Android Button'), onPressed: () {}, ) // Using platform package PlatformButton( child: Text('Adaptive Button'), onPressed: () {}, )

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( 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, ), ], )

// 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, ), )

// 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 }

// 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; }

// 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, )

Visibility( visible: isVisible, child: Container( width: 100, height: 100, color: Colors.blue, ), ) // Alternative with Offstage Offstage( offstage: !isVisible, child: Text('Hidden widget'), )

Row( children: [ Text('Start'), Spacer(), // Takes all available space Text('End'), ], ) // With flex property Spacer(flex: 2) // Takes 2x space

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)

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( 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( 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(), )