Getting Started
Quick Start
Get up and running with Shard in minutes with this quick tutorial.
Create Your First Shard
Let's create a simple counter app to demonstrate Shard's basic usage.
Step 1: Create a Shard
Create a new file counter_shard.dart:
import 'package:shard/shard.dart';
class CounterShard extends Shard<int> {
CounterShard() : super(0);
void increment() {
emit(state + 1);
}
void decrement() {
emit(state - 1);
}
void reset() {
emit(0);
}
}
Step 2: Provide the Shard
Wrap your app with ShardProvider:
import 'package:flutter/material.dart';
import 'package:shard/shard.dart';
import 'counter_shard.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Shard Counter',
home: ShardProvider<CounterShard>(
create: () => CounterShard(),
child: CounterScreen(),
),
);
}
}
Step 3: Use the Shard in Widgets
Use ShardBuilder to react to state changes:
class CounterScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Counter')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ShardBuilder<CounterShard, int>(
builder: (context, count) {
return Text(
'Count: $count',
style: Theme.of(context).textTheme.headlineLarge,
);
},
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
context.read<CounterShard>().decrement();
},
child: Text('-'),
),
SizedBox(width: 20),
ElevatedButton(
onPressed: () {
context.read<CounterShard>().increment();
},
child: Text('+'),
),
],
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
context.read<CounterShard>().reset();
},
child: Text('Reset'),
),
],
),
),
);
}
}
What's Next?
Now that you've created your first shard, explore more advanced features:
- Core Concepts - Learn about state management fundamentals
- Widgets - Learn about all available widgets and context extensions
- Persistent Shard - Add state persistence
- Debounce & Throttle - Optimize state updates
- Examples - See a complete todo app example