Skill v1.0.1
currentAutomated scan100/1004 files
version: "1.0.1" name: flutter-api description: Comprehensive Flutter API reference guide covering widgets, Material Design, Cupertino, animations, gestures, navigation, state management, and platform integration. Use when developing Flutter applications and needing detailed API knowledge for widgets, layout, styling, animations, platform channels, or any Flutter SDK functionality. Essential for building cross-platform mobile, web, and desktop applications with Flutter.
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
import 'package:flutter/widgets.dart';// Container - A convenience widget combining common painting, positioning, and sizingContainer(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 stylingText('Hello World',style: TextStyle(fontSize: 24.0,fontWeight: FontWeight.bold,color: Colors.blue,),)// Row & Column - Layout widgetsRow(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 widgetsStack(children: [Container(color: Colors.blue),Positioned(top: 10,left: 10,child: Text('Overlay'),),],)
Layout Widgets
// Padding - Add padding around a widgetPadding(padding: EdgeInsets.all(16.0),child: Text('Padded text'),)// Center - Center a widgetCenter(child: Text('Centered'))// Align - Align widget within parentAlign(alignment: Alignment.topRight,child: Icon(Icons.close),)// SizedBox - Fixed size box or spacingSizedBox(width: 100,height: 50,child: ElevatedButton(onPressed: () {},child: Text('Button'),),)// Flexible & Expanded - Responsive sizingRow(children: [Flexible(flex: 2,child: Container(color: Colors.red),),Expanded(flex: 3,child: Container(color: Colors.blue),),],)// Wrap - Flow layout that wraps childrenWrap(spacing: 8.0,runSpacing: 4.0,children: [Chip(label: Text('Tag 1')),Chip(label: Text('Tag 2')),Chip(label: Text('Tag 3')),],)
List Widgets
// ListView - Scrollable listListView(children: [ListTile(title: Text('Item 1')),ListTile(title: Text('Item 2')),ListTile(title: Text('Item 3')),],)// ListView.builder - Efficient for large listsListView.builder(itemCount: items.length,itemBuilder: (context, index) {return ListTile(title: Text(items[index]));},)// ListView.separated - With separatorsListView.separated(itemCount: items.length,itemBuilder: (context, index) => ListTile(title: Text(items[index])),separatorBuilder: (context, index) => Divider(),)// GridView - Grid layoutGridView.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 gridGridView.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
import 'package:flutter/material.dart';// Scaffold - Basic material app structureScaffold(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 cardCard(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'),],),),)// ButtonsElevatedButton(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
// TextField - Text inputTextField(decoration: InputDecoration(labelText: 'Enter your name',hintText: 'John Doe',prefixIcon: Icon(Icons.person),border: OutlineInputBorder(),),onChanged: (value) {print('Text changed: $value');},)// Form with validationfinal _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'),),],),)// CheckboxCheckbox(value: isChecked,onChanged: (bool? value) {setState(() {isChecked = value ?? false;});},)// Radio buttonsColumn(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!;});},),],)// SwitchSwitch(value: isSwitched,onChanged: (value) {setState(() {isSwitched = value;});},)// SliderSlider(value: currentValue,min: 0,max: 100,divisions: 10,label: currentValue.round().toString(),onChanged: (value) {setState(() {currentValue = value;});},)
Dialogs & Sheets
// AlertDialogshowDialog(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 actionNavigator.pop(context);},child: Text('Confirm'),),],),)// SnackBarScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Action completed'),action: SnackBarAction(label: 'Undo',onPressed: () {// Undo action},),duration: Duration(seconds: 3),),)// Bottom SheetshowModalBottomSheet(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 PickershowDatePicker(context: context,initialDate: DateTime.now(),firstDate: DateTime(2000),lastDate: DateTime(2100),).then((date) {if (date != null) {print('Selected date: $date');}});// Time PickershowTimePicker(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.
import 'package:flutter/cupertino.dart';// CupertinoApp - iOS-style appCupertinoApp(home: CupertinoPageScaffold(navigationBar: CupertinoNavigationBar(middle: Text('iOS App'),),child: Center(child: Text('Content')),),)// Cupertino ButtonsCupertinoButton(child: Text('iOS Button'),onPressed: () {},)CupertinoButton.filled(child: Text('Filled Button'),onPressed: () {},)// Cupertino DialogshowCupertinoDialog(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 actionNavigator.pop(context);},),],),)// Cupertino PickerCupertinoPicker(itemExtent: 32.0,onSelectedItemChanged: (index) {print('Selected: $index');},children: [Text('Option 1'),Text('Option 2'),Text('Option 3'),],)// Cupertino Sliver Navigation BarCupertinoPageScaffold(child: CustomScrollView(slivers: [CupertinoSliverNavigationBar(largeTitle: Text('Large Title'),),SliverList(delegate: SliverChildBuilderDelegate((context, index) => ListTile(title: Text('Item $index')),childCount: 50,),),],),)
Navigation (flutter/material.dart)
// Basic navigationNavigator.push(context,MaterialPageRoute(builder: (context) => SecondScreen()),);// Pop backNavigator.pop(context);// Named routesMaterialApp(initialRoute: '/',routes: {'/': (context) => HomeScreen(),'/details': (context) => DetailsScreen(),'/settings': (context) => SettingsScreen(),},);// Navigate to named routeNavigator.pushNamed(context, '/details');// Pass argumentsNavigator.pushNamed(context,'/details',arguments: {'id': 123, 'title': 'Item'},);// Receive argumentsclass DetailsScreen extends StatelessWidget {@overrideWidget 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']}'),);}}// Replace routeNavigator.pushReplacement(context,MaterialPageRoute(builder: (context) => NewScreen()),);// Remove all and pushNavigator.pushAndRemoveUntil(context,MaterialPageRoute(builder: (context) => HomeScreen()),(route) => false,);// Return data from screen// On second screenNavigator.pop(context, 'Result data');// On first screenfinal result = await Navigator.push(context,MaterialPageRoute(builder: (context) => SecondScreen()),);print('Result: $result');
Animation (flutter/animation.dart)
import 'package:flutter/animation.dart';// AnimationControllerclass AnimatedWidget extends StatefulWidget {@override_AnimatedWidgetState createState() => _AnimatedWidgetState();}class _AnimatedWidgetState extends State<AnimatedWidget>with SingleTickerProviderStateMixin {late AnimationController _controller;late Animation<double> _animation;@overridevoid initState() {super.initState();_controller = AnimationController(duration: Duration(seconds: 2),vsync: this,);_animation = Tween<double>(begin: 0, end: 300).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut),);_controller.forward();}@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return AnimatedBuilder(animation: _animation,builder: (context, child) {return Container(width: _animation.value,height: _animation.value,color: Colors.blue,);},);}}// Implicit animationsAnimatedContainer(duration: Duration(milliseconds: 300),width: isExpanded ? 200 : 100,height: isExpanded ? 200 : 100,color: isExpanded ? Colors.blue : Colors.red,curve: Curves.easeInOut,)AnimatedOpacity(opacity: isVisible ? 1.0 : 0.0,duration: Duration(milliseconds: 500),child: Container(color: Colors.blue),)AnimatedPositioned(duration: Duration(milliseconds: 300),top: isTop ? 0 : 100,left: isLeft ? 0 : 100,child: Container(width: 50, height: 50, color: Colors.red),)// Hero animation// On first screenHero(tag: 'hero-image',child: Image.network('url'),)// On second screenHero(tag: 'hero-image',child: Image.network('url'),)// TweenAnimationBuilderTweenAnimationBuilder<double>(tween: Tween<double>(begin: 0, end: 1),duration: Duration(seconds: 1),builder: (context, value, child) {return Opacity(opacity: value,child: Transform.scale(scale: value,child: child,),);},child: Container(width: 100, height: 100, color: Colors.blue),)
Gestures (flutter/gestures.dart)
// GestureDetectorGestureDetector(onTap: () => print('Tapped'),onDoubleTap: () => print('Double tapped'),onLongPress: () => print('Long pressed'),onPanUpdate: (details) {print('Pan: ${details.delta}');},onScaleUpdate: (details) {print('Scale: ${details.scale}');},child: Container(width: 200,height: 200,color: Colors.blue,child: Center(child: Text('Touch me')),),)// InkWell - Material ripple effectInkWell(onTap: () {},onLongPress: () {},splashColor: Colors.blue.withOpacity(0.3),child: Container(padding: EdgeInsets.all(16),child: Text('Tap me'),),)// Dismissible - Swipe to dismissDismissible(key: Key(item.id),direction: DismissDirection.endToStart,background: Container(color: Colors.red,alignment: Alignment.centerRight,padding: EdgeInsets.only(right: 16),child: Icon(Icons.delete, color: Colors.white),),onDismissed: (direction) {// Remove item},child: ListTile(title: Text(item.title)),)// DraggableDraggable<String>(data: 'Item data',child: Container(width: 100,height: 100,color: Colors.blue,child: Center(child: Text('Drag me')),),feedback: Material(elevation: 4,child: Container(width: 100,height: 100,color: Colors.blue.withOpacity(0.5),child: Center(child: Text('Dragging')),),),childWhenDragging: Container(width: 100,height: 100,color: Colors.grey,),)// DragTargetDragTarget<String>(builder: (context, candidateData, rejectedData) {return Container(width: 200,height: 200,color: candidateData.isEmpty ? Colors.grey : Colors.green,child: Center(child: Text('Drop here')),);},onWillAccept: (data) => true,onAccept: (data) {print('Received: $data');},)
State Management
// StatefulWidgetclass CounterWidget extends StatefulWidget {@override_CounterWidgetState createState() => _CounterWidgetState();}class _CounterWidgetState extends State<CounterWidget> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}@overrideWidget build(BuildContext context) {return Column(children: [Text('Count: $_counter'),ElevatedButton(onPressed: _incrementCounter,child: Text('Increment'),),],);}}// InheritedWidgetclass AppState extends InheritedWidget {final String username;final VoidCallback logout;AppState({required this.username,required this.logout,required Widget child,}) : super(child: child);static AppState? of(BuildContext context) {return context.dependOnInheritedWidgetOfExactType<AppState>();}@overridebool updateShouldNotify(AppState oldWidget) {return username != oldWidget.username;}}// UsageAppState(username: 'John',logout: () {},child: MyApp(),)// Access in child widgetsfinal appState = AppState.of(context);print(appState?.username);// ValueNotifierclass MyWidget extends StatefulWidget {@override_MyWidgetState createState() => _MyWidgetState();}class _MyWidgetState extends State<MyWidget> {final ValueNotifier<int> _counter = ValueNotifier<int>(0);@overridevoid dispose() {_counter.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Column(children: [ValueListenableBuilder<int>(valueListenable: _counter,builder: (context, value, child) {return Text('Count: $value');},),ElevatedButton(onPressed: () => _counter.value++,child: Text('Increment'),),],);}}
Async & Futures
// FutureBuilderFutureBuilder<String>(future: fetchData(),builder: (context, snapshot) {if (snapshot.connectionState == ConnectionState.waiting) {return CircularProgressIndicator();}if (snapshot.hasError) {return Text('Error: ${snapshot.error}');}if (snapshot.hasData) {return Text('Data: ${snapshot.data}');}return Text('No data');},)// StreamBuilderStreamBuilder<int>(stream: counterStream,initialData: 0,builder: (context, snapshot) {if (snapshot.hasError) {return Text('Error: ${snapshot.error}');}return Text('Count: ${snapshot.data}');},)// Example async functionFuture<String> fetchData() async {await Future.delayed(Duration(seconds: 2));return 'Data loaded';}// Example streamStream<int> counterStream() async* {for (int i = 0; i < 10; i++) {await Future.delayed(Duration(seconds: 1));yield i;}}
Platform Channels
import 'package:flutter/services.dart';// Method Channelclass BatteryService {static const platform = MethodChannel('samples.flutter.dev/battery');Future<int?> getBatteryLevel() async {try {final int? result = await platform.invokeMethod('getBatteryLevel');return result;} on PlatformException catch (e) {print("Failed to get battery level: '${e.message}'.");return null;}}}// Event Channelclass SensorService {static const eventChannel = EventChannel('samples.flutter.dev/sensor');Stream<double> get sensorStream {return eventChannel.receiveBroadcastStream().map((event) => event as double);}}// Usagefinal batteryLevel = await BatteryService().getBatteryLevel();print('Battery: $batteryLevel%');SensorService().sensorStream.listen((value) {print('Sensor value: $value');});
Common Patterns
Responsive Design
// MediaQueryfinal size = MediaQuery.of(context).size;final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;Container(width: size.width * 0.8,height: size.height * 0.5,)// LayoutBuilderLayoutBuilder(builder: (context, constraints) {if (constraints.maxWidth > 600) {return TabletLayout();} else {return MobileLayout();}},)// OrientationBuilderOrientationBuilder(builder: (context, orientation) {return GridView.count(crossAxisCount: orientation == Orientation.portrait ? 2 : 4,children: items,);},)
Theme Management
// Define themefinal lightTheme = ThemeData(primarySwatch: Colors.blue,brightness: Brightness.light,textTheme: TextTheme(headlineLarge: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),bodyMedium: TextStyle(fontSize: 16),),elevatedButtonTheme: ElevatedButtonThemeData(style: ElevatedButton.styleFrom(padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),),),);final darkTheme = ThemeData(primarySwatch: Colors.blue,brightness: Brightness.dark,);// Apply themeMaterialApp(theme: lightTheme,darkTheme: darkTheme,themeMode: ThemeMode.system,home: HomeScreen(),)// Access themefinal theme = Theme.of(context);Text('Styled Text',style: theme.textTheme.headlineLarge,)
Performance Optimization
// const constructorsconst Text('Static text')const Icon(Icons.home)// ListView.builder for large lists (already shown above)// RepaintBoundaryRepaintBoundary(child: ExpensiveWidget(),)// AutomaticKeepAliveClientMixinclass MyWidget extends StatefulWidget {@override_MyWidgetState createState() => _MyWidgetState();}class _MyWidgetState extends State<MyWidget>with AutomaticKeepAliveClientMixin {@overridebool get wantKeepAlive => true;@overrideWidget build(BuildContext context) {super.build(context); // Must callreturn Container();}}
Resources
This skill includes reference documentation for deeper API exploration:
references/
api_reference.md- Comprehensive API reference with additional examples- Additional library documentation can be added here
For the most up-to-date documentation, visit:
- Official API docs: https://api.flutter.dev/
- Flutter documentation: https://docs.flutter.dev/
- Widget catalog: https://docs.flutter.dev/ui/widgets
Quick Reference
Common Imports
import 'package:flutter/material.dart'; // Material Designimport 'package:flutter/cupertino.dart'; // iOS styleimport 'package:flutter/widgets.dart'; // Base widgetsimport 'package:flutter/services.dart'; // Platform services
Widget Lifecycle
initState() // Called once when widget is createdbuild() // Called when widget needs to be renderedsetState() // Trigger rebuilddispose() // Called when widget is removed
Common Widget Properties
key- Unique identifierchild/children- Child widget(s)padding- Internal spacingmargin- External spacingdecoration- Visual decorationconstraints- Size constraintsalignment- Child alignment
Layout Guidelines
- Use
Columnfor vertical layout - Use
Rowfor horizontal layout - Use
Stackfor overlapping widgets - Use
Expanded/Flexiblefor responsive sizing - Use
ListViewfor scrollable lists - Use
GridViewfor grid layouts - Use
CustomScrollViewwith Slivers for advanced scrolling