Flutter offers a vast array of widgets that simplify UI development, but beyond the commonly used ones, there are some lesser-known gems that can add significant value to your projects. In this guide, we’ll explore uncommon yet powerful Flutter widgets and how to use them effectively.
1. ReorderableListView
Allows users to reorder items in a list by drag-and-drop.
When to Use
- Apps that require customizable lists, like task managers or playlist creators.
Example
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('ReorderableListView Demo')),
body: ReorderableListViewExample(),
),
);
}
}
class ReorderableListViewExample extends StatefulWidget {
@override
_ReorderableListViewExampleState createState() => _ReorderableListViewExampleState();
}
class _ReorderableListViewExampleState extends State<ReorderableListViewExample> {
final List<String> _items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
@override
Widget build(BuildContext context) {
return ReorderableListView(
onReorder: (oldIndex, newIndex) {
setState(() {
if (newIndex > oldIndex) newIndex -= 1;
final item = _items.removeAt(oldIndex);
_items.insert(newIndex, item);
});
},
children: _items
.map((item) => ListTile(
key: ValueKey(item),
title: Text(item),
))
.toList(),
);
}
}
2. Dismissible
Enables swipe-to-dismiss functionality for widgets.
When to Use
- Use for apps with deletable or archivable content, such as email or messaging apps.
Example
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Dismissible(
key: Key(items[index]),
onDismissed: (direction) {
setState(() {
items.removeAt(index);
});
},
background: Container(color: Colors.red),
child: ListTile(title: Text(items[index])),
);
},
);
3. Hero
Creates smooth animations for transitioning between screens.
When to Use
- For apps with visually engaging transitions, like photo galleries or e-commerce apps.
Example
Hero(
tag: 'imageHero',
child: Image.network('https://example.com/image.jpg'),
);
4. AnimatedList
A dynamic list that supports item animations when adding or removing items.
When to Use
- Real-time updates in lists, like notifications or live data feeds.
Example
AnimatedList(
initialItemCount: items.length,
itemBuilder: (context, index, animation) {
return SizeTransition(
sizeFactor: animation,
child: ListTile(
title: Text(items[index]),
),
);
},
);
5. LayoutBuilder
Builds widgets dynamically based on the parent’s constraints.
When to Use
- Responsive layouts that adapt to different screen sizes.
Example
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 600) {
return Text('Large Screen Layout');
} else {
return Text('Small Screen Layout');
}
},
);
6. Draggable and DragTarget
Enables drag-and-drop functionality within your app.
When to Use
- Drag-and-drop interfaces, like card sorting or custom UI editors.
Example
Draggable(
data: 'Dragged Item',
feedback: Material(
child: Container(
color: Colors.blue,
child: Text('Dragging...'),
),
),
child: Container(
color: Colors.green,
child: Text('Drag Me'),
),
);
DragTarget(
builder: (context, candidateData, rejectedData) {
return Container(
color: Colors.yellow,
height: 100,
width: 100,
child: Center(child: Text('Drop Here')),
);
},
onAccept: (data) {
print('Accepted: $data');
},
);
Conclusion
These uncommon Flutter widgets can significantly enhance the functionality and user experience of your apps. Experiment with these hidden gems and bring unique features to your next Flutter project! 🚀