APP DEVELOPMENT USING FLUTTER

01CE0610

Unit 3
Scrolling List and Layouts

Presented by: Prof. Harsh Nagar

Contents
● Card Layout
● List Layout
● ListTile
● GridView
● Tab Bar
● Navigation Bar
List View

● In Flutter, ListView is a widget that provides a scrollable list of children, allowing users to scroll
through a potentially long list of items.
● It's commonly used to display a large amount of data that might not fit entirely on the screen at once.

Property Description

children Defines the children to be displayed in the list.

scrollDirection Determines the axis along which the list scrolls. Axis.vertical or Axis.horizontal.

padding Specifies the padding around the contents of the list.

physics Controls the scroll physics, such as how the scrolling behaves when reaching the edge.

shrinkWrap Adapts the size of the list to fit its children's size.

controller Allows programmatically controlling the position of the scroll view.

ListTile

● ListTile is a widget used to represent a single fixed-height row in a ListView, Column,

or TableRow.
● It's commonly used within lists to display textual information, leading icons, trailing
icons, and to handle taps or other interactions.
Property Description

Widget to be displayed before the title and subtitle. Typically used for icons, avatars, or
leading
images.

title The primary content of the list item.

subtitle Additional content displayed below the title.

onTap Callback function invoked when the list item is tapped.

List View →Example 1

import 'package:flutter/material.dart'; appBar: AppBar(

title: Text('ListView Example'),
void main() { ),
runApp(MyApp()); body: ListView(
} children: <Widget>[
ListTile(
class MyApp extends StatelessWidget { leading: Icon(Icons.star),
@override title: Text('Item 1'),
Widget build(BuildContext context) { ),
return MaterialApp(
home: Scaffold(
List View→ Example 1

ListTile( ),
leading: Icon(Icons.star), ),
title: Text('Item 2'), );
), }
ListTile( }
leading: Icon(Icons.star),
title: Text('Item 3'),
),
// Add more list items as needed
],
List View →Example 2

● import 'package:flutter/material.dart'; ListTile(

leading: CircleAvatar(
void main() { backgroundImage:
runApp(MyApp()); AssetImage('assets/butterfly.png'),
} ),
title: Text('Item 1'),
class MyApp extends StatelessWidget { subtitle: Text('Subtitle for Item 1'),
@override onTap: () {
Widget build(BuildContext context) { // Handle tap
return MaterialApp( },
home: Scaffold( ),
appBar: AppBar(
title: Text('ListView Example'),
),
body: ListView(
children: <Widget>[
List View →Example 2

ListTile( ),
leading: CircleAvatar( );
child: }
Icon(Icons.account_circle_rounded,color: }
Colors.blue,),
),
title: Text('Item 2'),
subtitle: Text('Subtitle for Item 2'),
onTap: () {
// Handle tap
},
),
// Add more ListTiles with different
content
],
),
Grid View

● GridView is a widget used to display a two-dimensional, scrollable grid of widgets.

● It's similar to ListView, but instead of displaying its children in a single-column or
single-row layout, it arranges them in a grid pattern with rows and columns.

Property Description

Defines the layout of the grid, including the number of columns (crossAxisCount),
gridDelegate
spacing, and size.

scrollDirection Determines the axis along which the grid scrolls.

shrinkWrap Indicates whether the grid should be sized to fit its children's size.

physics Controls the scroll physics of the grid.

padding Specifies the padding around the grid.

children A list of widgets representing the items in the grid.

Grid View → Example 1

import 'package:flutter/material.dart'; margin: EdgeInsets.all(8.0),

color: Colors.blueGrey[100 * (index % 9)],
void main() { child: Center(
runApp(MyApp()); child: Text(
} 'Item $index',
style: TextStyle(fontSize: 20),
class MyApp extends StatelessWidget { ),
@override ),
Widget build(BuildContext context) { );
return MaterialApp( }),
home: Scaffold( ),
appBar: AppBar( ),
title: Text('GridView Example'), );
), }
body: GridView.count( }
crossAxisCount: 2,
children: List.generate(6, (index) {
return Container(
Tab Bar
● Tab bar typically refers to a user interface component that displays a set of tabs, often horizontally
arranged, allowing users to switch between different sections or views of an application.
● Each tab typically represents a distinct category, feature, or content within the application.

Property Description

Tabs List of tabs displayed within the tab bar.

Controller Manages the state of the tab bar, including the currently selected tab.
Indicator Visual indicator highlighting the currently selected tab.
Indicator Color Color of the visual indicator.
Label Color Color of the text labels for the tabs.
Label Style Text style for the tab labels.
Tab Bar Height Height of the tab bar.
Tab Bar→ Example 1

import 'package:flutter/material.dart'; @override

_MyTabbedPageState createState() => _MyTabbedPageState();
void main() { }
runApp(MyApp());
} class _MyTabbedPageState extends State<MyTabbedPage> with
SingleTickerProviderStateMixin {
class MyApp extends StatelessWidget { TabController _tabController;
@override
Widget build(BuildContext context) { @override
return MaterialApp( void initState() {
home: MyTabbedPage(), super.initState();
); _tabController = TabController(length: 3, vsync: this);
} }
}
Tab Bar→ Example 1

controller: _tabController,
@override children: [
Widget build(BuildContext context) { Center(child: Text('Tab 1 Content')),
return Scaffold( Center(child: Text('Tab 2 Content')),
appBar: AppBar( Center(child: Text('Tab 3 Content')),
title: Text('Tab Bar Example'), ],
bottom: TabBar( ),
controller: _tabController, );
tabs: [ }
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'), @override
Tab(text: 'Tab 3'), void dispose() {
], _tabController.dispose();
), super.dispose();
), }
body: TabBarView( }
Navigation Bar
● In the context of user interfaces, a navigation bar is a graphical control element typically found at
the top or bottom of a screen in a mobile application.
● It provides users with access to different sections, features, or views within the application or
website, allowing them to navigate between various pages or sections.
●
Property Description

Items Defines the navigation items displayed within the navigation bar.
Selected Index Indicates the index of the currently selected navigation item.
OnTap Callback function triggered when a navigation item is tapped.
Icon / Text Representation of each navigation item, often containing an icon and/or text.
Elevation Elevation or shadow applied to the navigation bar, providing a sense of depth.
Boolean property indicating whether the navigation bar is placed at the bottom of the
Bottom Navigation Bar
screen.
Title Text or widget displayed as the title of the navigation bar.
Navigation Bar→ Example 1

import 'package:flutter/material.dart';
class _NavigationExampleState extends
void main() { State<NavigationExample> {
runApp(NavigationExample()); int _currentIndex = 0;
}
final List<Widget> _pages = [
class NavigationExample extends StatefulWidget { FirstPage(),
const NavigationExample({super.key}); SecondPage(),
ThirdPage(),
@override ];
State<NavigationExample> createState() =>
_NavigationExampleState();
}
Navigation Bar→ Example 1

@override label: 'Home'),

Widget build(BuildContext context) { BottomNavigationBarItem(icon: Icon(Icons.work),
return MaterialApp( label: 'Work'),
home: Scaffold( BottomNavigationBarItem(
appBar: AppBar(), icon: Icon(Icons.account_circle_rounded), label:
body: _pages[_currentIndex], 'Account'),
bottomNavigationBar: BottomNavigationBar( ],
currentIndex: _currentIndex, ),
onTap: (index) { ),
setState(() { );
_currentIndex = index; }
}); }
},
items: [ c
BottomNavigationBarItem(icon: Icon(Icons.home),
Navigation Bar→ Example 1

class FirstPage extends StatelessWidget {

@override class ThirdPage extends StatelessWidget {
Widget build(BuildContext context) { @override
return Center(child: Text("Home Page")); Widget build(BuildContext context) {
} return Center(child: Text("Account page"));
} }
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text("Work Page"));
}
}