I've been playing around with Flutter ShadCN components recently, and I have no been able to integrate the Tabs example code from the documentation into the boilerplate ShadCN boilerplate code given to us here
I simply took the
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown building ShadTabs<String>(dirty, dependencies:
[UnmanagedRestorationScope], state: ShadTabsState<String>#57a89):
ShadTheme.of() called with a context that does not contain a ShadTheme.
No ShadTheme ancestor could be found starting from the context that was passed to
ShadTheme.of().
This can happen because you do not have a ShadApp widget (which introduces a ShadTheme),
or it can happen if the context you use comes from a widget above this widget.
The context used was: ShadTabs<String>(dirty, dependencies: [UnmanagedRestorationScope],
state: ShadTabsState<String>#57a89)
The only line that I changed from the boilerplate code was that I commented out Padding of child and replaced it with const TabsExample() (My TabsExample widget was directly copy-pasted from the Tabs example documentation)
import 'package:flutter/services.dart';
import 'package:flutter_test_1/screens/home_tabs.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(systemNavigationBarColor: Colors.transparent));
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ShadcnApp(
title: 'My App',
home: const TabsExample(),
theme: ThemeData(
colorScheme: ColorSchemes.darkZinc(),
radius: 0.7,
),
);
}
}
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
_CounterPageState createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int _counter = 0;
int _selected = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
NavigationItem _buildButton(String label, IconData icon) {
return NavigationItem(
label: Text(label),
child: Icon(icon),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
headers: [
AppBar(
title: const Text('Counter App'),
subtitle: const Text('Testing features'),
leading: [
GhostButton(
onPressed: () {
openDrawer(
context: context,
builder: (context) {
return Container(
alignment: Alignment.center,
constraints: const BoxConstraints(
maxWidth: 300,
),
child: const Text('Drawer'),
);
},
position: OverlayPosition.left,
);
},
density: ButtonDensity.icon,
child: const Icon(Icons.menu),
),
],
trailing: [
GhostButton(
density: ButtonDensity.icon,
onPressed: () {
openSheet(
context: context,
builder: (context) {
return Container(
alignment: Alignment.center,
constraints: const BoxConstraints(
maxWidth: 200,
),
child: const Text('Sheet'),
);
},
position: OverlayPosition.right,
);
},
child: const Icon(Icons.search),
),
],
),
const Divider(),
],
footers: [
const Divider(),
NavigationBar(
onSelected: (i) {
setState(() {
_selected = i;
});
},
index: _selected,
children: [
_buildButton('Home', Icons.home),
_buildButton('Explore', Icons.explore),
_buildButton('Library', Icons.library_music),
],
),
],
child:
const TabsExample()
// Padding(
// padding: const EdgeInsets.all(32.0),
// child: Center(
// child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
// children: <Widget>[
// const Text(
// 'You have pushed the button this many times:',
// textAlign: TextAlign.center,
// ).p(),
// Text(
// '$_counter',
// ).h1(),
// PrimaryButton(
// onPressed: _incrementCounter,
// density: ButtonDensity.icon,
// child: const Icon(Icons.add),
// ).p(),
// ],
// ),
// ),
// ),
);
}
}
What's gone wrong?
I've been playing around with Flutter ShadCN components recently, and I have no been able to integrate the Tabs example code from the documentation into the boilerplate ShadCN boilerplate code given to us here
I simply took the
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown building ShadTabs<String>(dirty, dependencies:
[UnmanagedRestorationScope], state: ShadTabsState<String>#57a89):
ShadTheme.of() called with a context that does not contain a ShadTheme.
No ShadTheme ancestor could be found starting from the context that was passed to
ShadTheme.of().
This can happen because you do not have a ShadApp widget (which introduces a ShadTheme),
or it can happen if the context you use comes from a widget above this widget.
The context used was: ShadTabs<String>(dirty, dependencies: [UnmanagedRestorationScope],
state: ShadTabsState<String>#57a89)
The only line that I changed from the boilerplate code was that I commented out Padding of child and replaced it with const TabsExample() (My TabsExample widget was directly copy-pasted from the Tabs example documentation)
import 'package:flutter/services.dart';
import 'package:flutter_test_1/screens/home_tabs.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(systemNavigationBarColor: Colors.transparent));
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ShadcnApp(
title: 'My App',
home: const TabsExample(),
theme: ThemeData(
colorScheme: ColorSchemes.darkZinc(),
radius: 0.7,
),
);
}
}
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
_CounterPageState createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int _counter = 0;
int _selected = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
NavigationItem _buildButton(String label, IconData icon) {
return NavigationItem(
label: Text(label),
child: Icon(icon),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
headers: [
AppBar(
title: const Text('Counter App'),
subtitle: const Text('Testing features'),
leading: [
GhostButton(
onPressed: () {
openDrawer(
context: context,
builder: (context) {
return Container(
alignment: Alignment.center,
constraints: const BoxConstraints(
maxWidth: 300,
),
child: const Text('Drawer'),
);
},
position: OverlayPosition.left,
);
},
density: ButtonDensity.icon,
child: const Icon(Icons.menu),
),
],
trailing: [
GhostButton(
density: ButtonDensity.icon,
onPressed: () {
openSheet(
context: context,
builder: (context) {
return Container(
alignment: Alignment.center,
constraints: const BoxConstraints(
maxWidth: 200,
),
child: const Text('Sheet'),
);
},
position: OverlayPosition.right,
);
},
child: const Icon(Icons.search),
),
],
),
const Divider(),
],
footers: [
const Divider(),
NavigationBar(
onSelected: (i) {
setState(() {
_selected = i;
});
},
index: _selected,
children: [
_buildButton('Home', Icons.home),
_buildButton('Explore', Icons.explore),
_buildButton('Library', Icons.library_music),
],
),
],
child:
const TabsExample()
// Padding(
// padding: const EdgeInsets.all(32.0),
// child: Center(
// child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
// children: <Widget>[
// const Text(
// 'You have pushed the button this many times:',
// textAlign: TextAlign.center,
// ).p(),
// Text(
// '$_counter',
// ).h1(),
// PrimaryButton(
// onPressed: _incrementCounter,
// density: ButtonDensity.icon,
// child: const Icon(Icons.add),
// ).p(),
// ],
// ),
// ),
// ),
);
}
}
What's gone wrong?
Share Improve this question asked Apr 2 at 2:08 Kelvin JouKelvin Jou 3711 gold badge2 silver badges12 bronze badges 01 Answer
Reset to default 1You are mixing two different packages, which are both shadcn ports for flutter.
The example is from shadcn_flutter but the tabs are from shadcn_ui. Try to use one of the two.