Flutter API Reference Guide
Overview
This skill provides comprehensive guidance on Flutter's API, covering all major libraries and packages in the Flutter SDK. Flutter is Google's UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.
Core Flutter Libraries
Widgets (flutter/widgets.dart)
The foundational widget library that provides the basic building blocks for Flutter apps.
Basic Widgets
dart
import 'package:flutter/widgets.dart';
// Container - A convenience widget combining common painting, positioning, and sizing
Container(
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.symmetric(horizontal: 8.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8.0),
boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 4.0)],
),
child: Text('Hello Flutter'),
)
// Text - Display text with styling
Text(
'Hello World',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
)
// Row & Column - Layout widgets
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.star),
Text('Rating'),
Text('4.5'),
],
)
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Title'),
Text('Subtitle'),
],
)
// Stack - Overlay widgets
Stack(
children: [
Container(color: Colors.blue),
Positioned(
top: 10,
left: 10,
child: Text('Overlay'),
),
],
)
Layout Widgets
dart
// Padding - Add padding around a widget
Padding(
padding: EdgeInsets.all(16.0),
child: Text('Padded text'),
)
// Center - Center a widget
Center(child: Text('Centered'))
// Align - Align widget within parent
Align(
alignment: Alignment.topRight,
child: Icon(Icons.close),
)
// SizedBox - Fixed size box or spacing
SizedBox(
width: 100,
height: 50,
child: ElevatedButton(
onPressed: () {},
child: Text('Button'),
),
)
// Flexible & Expanded - Responsive sizing
Row(
children: [
Flexible(
flex: 2,
child: Container(color: Colors.red),
),
Expanded(
flex: 3,
child: Container(color: Colors.blue),
),
],
)
// Wrap - Flow layout that wraps children
Wrap(
spacing: 8.0,
runSpacing: 4.0,
children: [
Chip(label: Text('Tag 1')),
Chip(label: Text('Tag 2')),
Chip(label: Text('Tag 3')),
],
)
List Widgets
dart
// ListView - Scrollable list
ListView(
children: [
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
ListTile(title: Text('Item 3')),
],
)
// ListView.builder - Efficient for large lists
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]));
},
)
// ListView.separated - With separators
ListView.separated(
itemCount: items.length,
itemBuilder: (context, index) => ListTile(title: Text(items[index])),
separatorBuilder: (context, index) => Divider(),
)
// GridView - Grid layout
GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: [
Card(child: Center(child: Text('1'))),
Card(child: Center(child: Text('2'))),
Card(child: Center(child: Text('3'))),
Card(child: Center(child: Text('4'))),
],
)
// GridView.builder - Efficient grid
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemCount: items.length,
itemBuilder: (context, index) {
return Card(child: Center(child: Text('Item $index')));
},
)
Material Design (flutter/material.dart)
Flutter's Material Design implementation with widgets following Material Design guidelines.
Material Widgets
dart
import 'package:flutter/material.dart';
// Scaffold - Basic material app structure
Scaffold(
appBar: AppBar(
title: Text('My App'),
actions: [
IconButton(icon: Icon(Icons.search), onPressed: () {}),
IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
],
),
body: Center(child: Text('Content')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(child: Text('Header')),
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
],
),
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
],
),
)
// Card - Material design card
Card(
elevation: 4.0,
margin: EdgeInsets.all(8.0),
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
Text('Card Title', style: Theme.of(context).textTheme.headlineSmall),
SizedBox(height: 8),
Text('Card content goes here'),
],
),
),
)
// Buttons
ElevatedButton(
onPressed: () {},
child: Text('Elevated Button'),
)
TextButton(
onPressed: () {},
child: Text('Text Button'),
)
OutlinedButton(
onPressed: () {},
child: Text('Outlined Button'),
)
IconButton(
icon: Icon(Icons.favorite),
onPressed: () {},
)
FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
)
Form Widgets
dart
// TextField - Text input
TextField(
decoration: InputDecoration(
labelText: 'Enter your name',
hintText: 'John Doe',
prefixIcon: Icon(Icons.person),
border: OutlineInputBorder(),
),
onChanged: (value) {
print('Text changed: $value');
},
)
// Form with validation
final _formKey = GlobalKey<FormState>();
Form(
key: _formKey,
child: Column(
children: [
TextFormField(
decoration: InputDecoration(labelText: 'Email'),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter email';
}
if (!value.contains('@')) {
return 'Please enter valid email';
}
return null;
},
),
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
validator: (value) {
if (value == null || value.length < 6) {
return 'Password must be at least 6 characters';
}
return null;
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
// Process form
}
},
child: Text('Submit'),
),
],
),
)
// Checkbox
Checkbox(
value: isChecked,
onChanged: (bool? value) {
setState(() {
isChecked = value ?? false;
});
},
)
// Radio buttons
Column(
children: [
RadioListTile<String>(
title: Text('Option 1'),
value: 'option1',
groupValue: selectedOption,
onChanged: (value) {
setState(() {
selectedOption = value!;
});
},
),
RadioListTile<String>(
title: Text('Option 2'),
value: 'option2',
groupValue: selectedOption,
onChanged: (value) {
setState(() {
selectedOption = value!;
});
},
),
],
)
// Switch
Switch(
value: isSwitched,
onChanged: (value) {
setState(() {
isSwitched = value;
});
},
)
// Slider
Slider(
value: currentValue,
min: 0,
max: 100,
divisions: 10,
label: currentValue.round().toString(),
onChanged: (value) {
setState(() {
currentValue = value;
});
},
)
Dialogs & Sheets
dart
// AlertDialog
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Confirm Action'),
content: Text('Are you sure you want to proceed?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text('Cancel'),
),
TextButton(
onPressed: () {
// Perform action
Navigator.pop(context);
},
child: Text('Confirm'),
),
],
),
)
// SnackBar
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Action completed'),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
// Undo action
},
),
duration: Duration(seconds: 3),
),
)
// Bottom Sheet
showModalBottomSheet(
context: context,
builder: (context) {
return Container(
height: 200,
child: Column(
children: [
ListTile(
leading: Icon(Icons.share),
title: Text('Share'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.link),
title: Text('Copy link'),
onTap: () {},
),
],
),
);
},
)
// Date Picker
showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(2000),
lastDate: DateTime(2100),
).then((date) {
if (date != null) {
print('Selected date: $date');
}
});
// Time Picker
showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
).then((time) {
if (time != null) {
print('Selected time: $time');
}
});
Cupertino (flutter/cupertino.dart)
iOS-style widgets following Apple's Human Interface Guidelines.
dart
import 'package:flutter/cupertino.dart';
// CupertinoApp - iOS-style app
CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('iOS App'),
),
child: Center(child: Text('Content')),
),
)
// Cupertino Buttons
CupertinoButton(
child: Text('iOS Button'),
onPressed: () {},
)
CupertinoButton.filled(
child: Text('Filled Button'),
onPressed: () {},
)
// Cupertino Dialog
showCupertinoDialog(
context: context,
builder: (context) => CupertinoAlertDialog(
title: Text('Alert'),
content: Text('This is an iOS-style alert'),
actions: [
CupertinoDialogAction(
child: Text('Cancel'),
onPressed: () => Navigator.pop(context),
),
CupertinoDialogAction(
isDestructiveAction: true,
child: Text('Delete'),
onPressed: () {
// Delete action
Navigator.pop(context);
},
),
],
),
)
// Cupertino Picker
CupertinoPicker(
itemExtent: 32.0,
onSelectedItemChanged: (index) {
print('Selected: $index');
},
children: [
Text('Option 1'),
Text('Option 2'),
Text('Option 3'),
],
)
// Cupertino Sliver Navigation Bar
CupertinoPageScaffold(
child: CustomScrollView(
slivers: [
CupertinoSliverNavigationBar(
largeTitle: Text('Large Title'),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(title: Text('Item $index')),
childCount: 50,
),
),
],
),
)
Navigation (flutter/material.dart)
dart
// Basic navigation
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
// Pop back
Navigator.pop(context);
// Named routes
MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/details': (context) => DetailsScreen(),
'/settings': (context) => SettingsScreen(),
},
);
// Navigate to named route
Navigator.pushNamed(context, '/details');
// Pass arguments
Navigator.pushNamed(
context,
'/details',
arguments: {'id': 123, 'title': 'Item'},
);
// Receive arguments
class DetailsScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final args = ModalRoute.of(context)!.settings.arguments as Map;
return Scaffold(
appBar: AppBar(title: Text(args['title'])),
body: Text('ID: ${args['id']}'),
);
}
}