1. Container Widget
The Flutter Container widget is the most common and versatile widget that allows you to customize the visual properties of its child widget. It has attributes such as height, width, color, alignment, margin, padding, transform and border to create unique design elements within your app. Container( height: 200, width: double.infinity, color: Colors.red, alignment: Alignment.center, margin: const EdgeInsets.all(20), padding: const EdgeInsets.all(40), transform: Matrix4.rotationZ(0.3), child: const Text("This is a Container!", style: TextStyle(fontSize: 20) ), ),2. Text Widget
The Flutter Text widget is used to display text in your app. It allows you to control the font, size, color, fontWeight, fontStyle, letterSpacing, wordSpacing and other text-related properties. You can also use this widget to format text using RichText widget for more advanced styling. Text( "This is a Text Widget.", style: TextStyle( fontSize: 25, color: Colors.purple, fontWeight: FontWeight.w800, fontStyle: FontStyle.italic, letterSpacing: 8, wordSpacing: 20, backgroundColor: Colors.yellow, shadows: [ Shadow(color: Colors.redAccent, offset: Offset(2,1), blurRadius:10,) ] ), )3. AppBar
The AppBar widget is used for creating a navigation bar at the top of the screen. It allows you to add titles, toolbar height, shape, elevation, backgroundColor, and icons to provide easy access to different parts of your app. You can customize the app bar’s appearance and behavior using various properties. AppBar( title: const Text("This is AppBar!"), titleSpacing: 1, toolbarOpacity: 0.7, centerTitle: true, toolbarHeight: 56, shape: const RoundedRectangleBorder( borderRadius: BorderRadius.only( bottomRight: Radius.circular(20), bottomLeft: Radius.circular(20), ), ), elevation: 4, backgroundColor: Colors.redAccent[400], ),4. ListView
The ListView widget is used to display a scrolling list of children. It is perfect for displaying large amounts of data without taking up too much space on the screen. You can customize the ListView with different itemBuilder methods to create various list item designs. ListView( padding: EdgeInsets.all(20), children: [ Center( child: Text( 'This is a ListView Title', style: TextStyle(fontSize: 50), ), ), Text( "This is the ListView body", ), ], ),5. CircleAvatar
It is a widget that creates a circle in which we can add background color, background image, or just some text. We use it mostly to represent a user with his image or with his initials. Though we can make a similar widget from scratch, this widget is shipped by Flutter itself and makes it easier to build a list of User, Profile, or Chat screens. CircleAvatar( backgroundImage: Image.asset('assets/images/avatar.png'), ), Also Read: What is a Flutter Developer6. Image
The Flutter Image widget is used to display images in apps. You can load images from local assets or network URLs and customize their appearance using properties like placeholder, image, and height,width etc. Images are used for creating visually appealing user interfaces. Image.asset( placeholder: 'assets/placeholder.png', image: 'https://w7.pngwing.com/pngs/537/866/png-transparent-flutter-hd-logo-thumbnail.png', height: 300, width: 150 ),7. TextField
Input forms are a fundamental part of almost every app. Text Field is the widget we use for capturing user input. It supports various keyboard types, input validation, and input formatting making it easy to create forms for collecting user data. TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Password', hintText: 'Enter Password', ), ),8. BottomNavigationBar
Navigation is an essential aspect of any app, and BottomNavigationBar provides a convenient way to implement tab-based navigation at the bottom of the screen. It supports multiple tabs and customizable icons and labels, BottomNavigationBar helps users navigate your app with ease. bottomNavigationBar: BottomNavigationBar( items: const [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text('Home'), backgroundColor: Colors.red ), BottomNavigationBarItem( icon: Icon(Icons.search), title: Text('Search'), backgroundColor: Colors.blue ), BottomNavigationBarItem( icon: Icon(Icons.person), title: Text('Profile'), backgroundColor: Colors.green, ), ], currentIndex: _selectedIndex, selectedItemColor: Colors.black, iconSize: 40, onTap: bottomBarPressed, elevation: 5 ),9. GestureDetector
GestureDetector does what its name suggests, it detects gestures and clicks made by the users. It opens up a world of possibilities for adding interactivity to Flutter app. It can detect various gestures like taps, swipes, and drags, allowing us to create rich and engaging user experiences. GestureDetector( onTap: () { print("Container clicked!"); }, child: Container( width: 300, height: 300, color: Colors.red, child: Center( child: Text( "Click Me!", style: TextStyle(fontSize: 20, color: Colors.black), ), ), ), )10. Card
This is an inbuilt widget made by the Flutter team and as its name suggests, it provides the look of a Card. It is basically a Container with round corners and a slight elevation. It has a lot of properties that provide us to customize it further like color, shape, shadow, elevation, margin, shape etc. Card( child: Column( children: [ const ListTile( leading: Icon(Icons.profile, size: 25), title: Text('Flutter'), subtitle: Text('Best framework!'), ), ], ), );Conclusion
Flutter widgets are the building blocks that empower developers to create stunning, feature-rich applications across multiple platforms. This was just the tip of the iceberg of what Flutter provides. There are over 100+ Flutter widgets in the Flutter documentation. We have just highlighted here the top 10 most commonly used widgets during Flutter development. Go ahead and start unleashing your creativity and build amazing apps with these handy widgets.