Scribd
Upload
15 views10 pages

SingleChildScrollView, ListView, AppBar, Drawer, BottomNavigationBar Widgets

The document provides an overview of various Flutter widgets, including SingleChildScrollView, ListView, and AppBar, explaining their functionalities and use cases. It highlights the importance of these widgets for creating scrollable and navigable user interfaces in Flutter applications. Additionally, it includes examples of code snippets for implementing these widgets effectively.

Uploaded by

abdulqadeer.dastagery55
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views10 pages

SingleChildScrollView, ListView, AppBar, Drawer, BottomNavigationBar Widgets

The document provides an overview of various Flutter widgets, including SingleChildScrollView, ListView, and AppBar, explaining their functionalities and use cases. It highlights the importance of these widgets for creating scrollable and navigable user interfaces in Flutter applications. Additionally, it includes examples of code snippets for implementing these widgets effectively.

Uploaded by

abdulqadeer.dastagery55
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Flutter

Coding and Programming


01
widgets
1-1 SingleChildScrollView
In Flutter, SingleChildScrollView is a widget that enables
scrolling for a single widget that might exceed the available
space. It’s particularly useful when you have a layout or
content that may be too large for the screen. You wrap your
widget inside a SingleChildScrollView to allow scrolling,
either vertically (default) or horizontally.

SingleChildScrollView(

child: Column(

children: List.generate(50, (index) => ListTile(title:

Text("Item $index"))),

), ),
1-2 ListView
ListView in Flutter is a widget that displays a list of
items in a scrollable view. It's highly optimized for
large datasets, offering features like lazy loading
(only rendering items as they are scrolled into view).
ListView is one of the most commonly used widgets
when building dynamic lists or long-scrollable pages
in apps.
ListView(
children: <Widget>[
ListTile(title: Text("Item 1")),
ListTile(title: Text("Item 2")),
], ),
1-3 ListView Builder
ListView.builder:
 This is used for creating long or infinite lists. It builds
the items lazily as they scroll into view, which
improves performance.
 Use this when you don’t know the exact number of
items or when working with a large dataset.
ListView.builder(
itemCount: 100, // Number of items to be
displayed
itemBuilder: (context, index) {
return ListTile(
title: Text("Item $index"),
1-4 ListView Separated
ListView.separated:
 This creates a list with separators between each item.
 Useful when you want to add dividers or custom
widgets between list items.

ListView.separated(
itemCount: 10,
itemBuilder: (context, index) {
return ListTile(title: Text('Item $index'));
},
separatorBuilder: (context, index) {
return Divider(); // Separates each item
},
);
1-5 AppBar Widget
AppBar is a widget usually used as a header at the top of a
Scaffold widget. It can display things like the app title, a
menu, navigation buttons, or other actions.
AppBar(
title: Text('Poets Raise Their Evils’),
centerTitle: true,
backgroundColor: Colors.deepPurple,
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {}, ),
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () {},),],
),
1-6 BottomNavigationBar
The BottomNavigationBar in Flutter provides a way to
add a bottom navigation menu, allowing users to switch
between different screens by tapping icons. It's commonly
used for main navigation in an app and works well with a
Scaffold to create a consistent layout.
body: _pages[_selectedIndex], int _selectedIndex = 0;
bottomNavigationBar: // List of widgets for each tab
BottomNavigationBar(
items: const static const List<Widget> _pages =
<BottomNavigationBarItem>[ <Widget>[
BottomNavigationBarItem( Center(child: Text('Home Page')),
icon: Icon(Icons.home),
label: 'Home', Center(child: Text('Search Page')),
), Center(child: Text('Profile Page')),
BottomNavigationBarItem(
];
icon: Icon(Icons.search),
label: 'Search',
), void _onItemTapped(int index) {
],
setState(() {
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue, _selectedIndex = index;
unselectedItemColor: Colors.grey, });
onTap: _onItemTapped,
}
),
1-7 Drawer Widget
Drawer is a convenient way to add a side navigation menu
to your app, typically accessible by swiping from the left
edge of the screen or tapping an icon in the AppBar. Here’s
a basic example of how to create a Drawer in Flutter:
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
decoration: BoxDecoration(color: Colors.blue, ),
child: Text('Menu', style: TextStyle(color: Colors.white, fontSize: 24, ),
),),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () {
// Navigate or handle click
Navigator.pop(context); // Close the drawer
},),],),);
Thanks
Do you have any
questions?
!
Resources
 https://flutter.dev

You might also like