<h1 id="basic-flutter-widgets-every-developer-should-know">Basic Flutter Widgets Every Developer Should Know</h1> <p>Understanding basic widgets is crucial for Flutter development. Let's explore the fundamental widgets that you'll use in almost every Flutter application.</p> <h2 id="text-and-display-widgets">1. Text and Display Widgets</h2> <h3 id="text-widget">Text Widget</h3> <pre>Text( 'Hello, Flutter!', style: TextStyle( fontSize: 24, fontWeight: FontWeight.bold, color: Colors.blue, ), ) </pre> <h3 id="richtext-widget">RichText Widget</h3> <pre>RichText( text: TextSpan( text: 'Hello ', style: TextStyle(color: Colors.black), children: [ TextSpan( text: 'Flutter', style: TextStyle( color: Colors.blue, fontWeight: FontWeight.bold, ), ), ], ), ) </pre> <h2 id="layout-widgets">2. Layout Widgets</h2> <h3 id="container-widget">Container Widget</h3> <pre>Container( width: 200, height: 100, padding: EdgeInsets.all(16), margin: EdgeInsets.all(8), decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(8), ), child: Text('Container'), ) </pre> <h3 id="row-and-column-widgets">Row and Column Widgets</h3> <pre>Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Container(color: Colors.red, width: 50, height: 50), Container(color: Colors.green, width: 50, height: 50), Container(color: Colors.blue, width: 50, height: 50), ], )
Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container(color: Colors.red, width: 50, height: 50), Container(color: Colors.green, width: 50, height: 50), Container(color: Colors.blue, width: 50, height: 50), ], ) </pre> <h2 id="input-widgets">3. Input Widgets</h2> <h3 id="textfield-widget">TextField Widget</h3> <pre>TextField( decoration: InputDecoration( labelText: 'Enter text', hintText: 'Type something...', border: OutlineInputBorder(), ), onChanged: (value) { print('Text changed: $value'); }, ) </pre> <h3 id="elevatedbutton-widget">ElevatedButton Widget</h3> <pre>ElevatedButton( onPressed: () { print('Button pressed'); }, child: Text('Click Me'), style: ElevatedButton.styleFrom( padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16), ), ) </pre> <h2 id="list-widgets">4. List Widgets</h2> <h3 id="listview-widget">ListView Widget</h3> <pre>ListView( children: [ ListTile( leading: Icon(Icons.star), title: Text('Item 1'), subtitle: Text('Description 1'), ), ListTile( leading: Icon(Icons.star), title: Text('Item 2'), subtitle: Text('Description 2'), ), ListTile( leading: Icon(Icons.star), title: Text('Item 3'), subtitle: Text('Description 3'), ), ], ) </pre> <h3 id="gridview-widget">GridView Widget</h3> <pre>GridView.count( crossAxisCount: 2, children: List.generate( 6, (index) => Container( color: Colors.blue, margin: EdgeInsets.all(8), child: Center( child: Text('Item $index'), ), ), ), ) </pre> <h2 id="navigation-widgets">5. Navigation Widgets</h2> <h3 id="appbar-widget">AppBar Widget</h3> <pre>AppBar( title: Text('My App'), actions: [ IconButton( icon: Icon(Icons.search), onPressed: () { print('Search pressed'); }, ), IconButton( icon: Icon(Icons.more_vert), onPressed: () { print('More pressed'); }, ), ], ) </pre> <h3 id="bottomnavigationbar-widget">BottomNavigationBar Widget</h3> <pre>BottomNavigationBar( currentIndex: 0, items: [ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Home', ), BottomNavigationBarItem( icon: Icon(Icons.business), label: 'Business', ), BottomNavigationBarItem( icon: Icon(Icons.school), label: 'School', ), ], onTap: (index) { print('Selected index: $index'); }, ) </pre>