Created
May 20, 2025 07:30
-
-
Save gianlucaschoefer/1af56591c9673d8c3b9c606bd4056aa8 to your computer and use it in GitHub Desktop.
NavigationToolbar-like Row Example with 2 optional Leading + Trailing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| import 'package:provider/provider.dart'; | |
| void main() { | |
| runApp( | |
| ChangeNotifierProvider( | |
| create: (context) => StackData(), | |
| child: const MyApp(), | |
| ), | |
| ); | |
| } | |
| class StackData extends ChangeNotifier { | |
| bool _hasLeftChild1 = true; | |
| bool _hasLeftChild2 = false; | |
| bool _hasRightChild1 = false; | |
| bool _hasRightChild2 = true; | |
| bool get hasLeftChild1 => _hasLeftChild1; | |
| bool get hasLeftChild2 => _hasLeftChild2; | |
| bool get hasRightChild1 => _hasRightChild1; | |
| bool get hasRightChild2 => _hasRightChild2; | |
| void toggleLeft1() { | |
| _hasLeftChild1 = !_hasLeftChild1; | |
| notifyListeners(); | |
| } | |
| void toggleLeft2() { | |
| _hasLeftChild2 = !_hasLeftChild2; | |
| notifyListeners(); | |
| } | |
| void toggleRight1() { | |
| _hasRightChild1 = !_hasRightChild1; | |
| notifyListeners(); | |
| } | |
| void toggleRight2() { | |
| _hasRightChild2 = !_hasRightChild2; | |
| notifyListeners(); | |
| } | |
| } | |
| class MyApp extends StatelessWidget { | |
| const MyApp({super.key}); | |
| @override | |
| Widget build(BuildContext context) { | |
| return MaterialApp( | |
| title: 'Stack Example', | |
| theme: ThemeData( | |
| primarySwatch: Colors.blue, | |
| ), | |
| home: const MyHomePage(), | |
| ); | |
| } | |
| } | |
| class MyHomePage extends StatelessWidget { | |
| const MyHomePage({super.key}); | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| appBar: AppBar( | |
| title: const Text('Stack Example'), | |
| ), | |
| body: Padding( | |
| padding: const EdgeInsets.all(8.0), | |
| child: StackExample(), | |
| ), | |
| ); | |
| } | |
| } | |
| class StackExample extends StatelessWidget { | |
| @override | |
| Widget build(BuildContext context) { | |
| final stackData = Provider.of<StackData>(context); | |
| bool hasLeftChild1 = stackData.hasLeftChild1; | |
| bool hasLeftChild2 = stackData.hasLeftChild2; | |
| bool hasRightChild1 = stackData.hasRightChild1; | |
| bool hasRightChild2 = stackData.hasRightChild2; | |
| return Column( | |
| children: [ | |
| Stack( | |
| alignment: Alignment.center, | |
| children: [ | |
| Positioned.fill( | |
| child: Center( | |
| child: YourCenterWidget(), | |
| ), | |
| ), | |
| Row( | |
| mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
| children: [ | |
| Row( | |
| mainAxisSize: MainAxisSize.min, | |
| children: [ | |
| if (hasLeftChild1) YourLeftWidget1(), | |
| if (hasLeftChild2) YourLeftWidget2(), | |
| ], | |
| ), | |
| Opacity( | |
| opacity: 0, | |
| child: YourCenterWidget(), | |
| ), | |
| Row( | |
| mainAxisSize: MainAxisSize.min, | |
| children: [ | |
| if (hasRightChild1) YourRightWidget1(), | |
| if (hasRightChild2) YourRightWidget2(), | |
| ], | |
| ), | |
| ], | |
| ), | |
| ], | |
| ), | |
| const SizedBox(height: 20), | |
| Wrap( | |
| spacing: 8.0, | |
| children: [ | |
| ElevatedButton( | |
| onPressed: () => stackData.toggleLeft1(), | |
| child: Text('Toggle Left 1 (${hasLeftChild1 ? 'On' : 'Off'})'), | |
| ), | |
| ElevatedButton( | |
| onPressed: () => stackData.toggleLeft2(), | |
| child: Text('Toggle Left 2 (${hasLeftChild2 ? 'On' : 'Off'})'), | |
| ), | |
| ElevatedButton( | |
| onPressed: () => stackData.toggleRight1(), | |
| child: Text('Toggle Right 1 (${hasRightChild1 ? 'On' : 'Off'})'), | |
| ), | |
| ElevatedButton( | |
| onPressed: () => stackData.toggleRight2(), | |
| child: Text('Toggle Right 2 (${hasRightChild2 ? 'On' : 'Off'})'), | |
| ), | |
| ], | |
| ), | |
| ], | |
| ); | |
| } | |
| } | |
| class YourCenterWidget extends StatelessWidget { | |
| @override | |
| Widget build(BuildContext context) { | |
| return Container( | |
| padding: const EdgeInsets.all(8.0), | |
| decoration: BoxDecoration( | |
| color: Colors.yellow.withOpacity(0.5), | |
| borderRadius: BorderRadius.circular(5), | |
| ), | |
| child: const Text('Center'), | |
| ); | |
| } | |
| } | |
| class YourLeftWidget1 extends StatelessWidget { | |
| @override | |
| Widget build(BuildContext context) { | |
| return Container( | |
| padding: const EdgeInsets.all(8.0), | |
| decoration: BoxDecoration( | |
| color: Colors.green.withOpacity(0.5), | |
| borderRadius: BorderRadius.circular(5), | |
| ), | |
| child: const Text('Left 1'), | |
| ); | |
| } | |
| } | |
| class YourLeftWidget2 extends StatelessWidget { | |
| @override | |
| Widget build(BuildContext context) { | |
| return Container( | |
| padding: const EdgeInsets.all(8.0), | |
| decoration: BoxDecoration( | |
| color: Colors.lightGreen.withOpacity(0.5), | |
| borderRadius: BorderRadius.circular(5), | |
| ), | |
| child: const Text('Left 2'), | |
| ); | |
| } | |
| } | |
| class YourRightWidget1 extends StatelessWidget { | |
| @override | |
| Widget build(BuildContext context) { | |
| return Container( | |
| padding: const EdgeInsets.all(8.0), | |
| decoration: BoxDecoration( | |
| color: Colors.red.withOpacity(0.5), | |
| borderRadius: BorderRadius.circular(5), | |
| ), | |
| child: const Text('Right 1'), | |
| ); | |
| } | |
| } | |
| class YourRightWidget2 extends StatelessWidget { | |
| @override | |
| Widget build(BuildContext context) { | |
| return Container( | |
| padding: const EdgeInsets.all(8.0), | |
| decoration: BoxDecoration( | |
| color: Colors.pink.withOpacity(0.5), | |
| borderRadius: BorderRadius.circular(5), | |
| ), | |
| child: const Text('Right 2'), | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment