I am new to flutter and have no idea about it, I created a bottom bar and icons are rive tried to run on flutter app, but the icons are not showing up. This is my code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hlibrary/models/tab_item.dart';
import 'package:rive/rive.dart' hide LinearGradient;
class BotBar extends StatefulWidget {
const BotBar({super.key});
@override
State<BotBar> createState() => _BotBarState();
}
class _BotBarState extends State<BotBar> {
final List<TabItem> _icons = TabItem.tabItemsList;
int _selectedTab = 0;
void _onRiveIconInit(Artboard artboard, index) {
final controller = StateMachineController.fromArtboard(
artboard, _icons[index].stateMachine);
artboard.addController(controller!);
_icons[index].status = controller.findInput<bool>("active") as SMIBool;
}
void onTabPress(int index) {
if (_selectedTab != index) {
setState(() {
_selectedTab = index;
});
_icons[index].status!.change(true);
Future.delayed(const Duration(seconds: 1), () {
_icons[index].status!.change(true);
});
}
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.white.withOpacity(0.5),
Colors.white.withOpacity(0)
]),
),
child: Container(
decoration: const BoxDecoration(
boxShadow: [
BoxShadow(color: Colors.amber, offset: Offset(0, 20))
],
color: Color.fromARGB(0, 255, 255, 255),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15), topRight: Radius.circular(15))),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: List.generate(_icons.length, (index) {
TabItem icon = _icons[index];
return Expanded(
key: icon.id,
child: CupertinoButton(
padding: const EdgeInsets.all(12),
child: AnimatedOpacity(
opacity: _selectedTab == index ? 1 : 0.5,
duration: const Duration(milliseconds: 200),
child: Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
Positioned(
top: -4,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: 4,
width: _selectedTab == index ? 20 : 0,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(2)),
),
),
SizedBox(
height: 36,
width: 36,
child: RiveAnimation.asset(
'assets/rive/icons.riv',
stateMachines: const ["icon.stateMachine"],
artboard: "_icon.artboard",
onInit: (artboard) {
_onRiveIconInit(artboard, index);
},
),
),
]),
),
onPressed: () {
onTabPress(index);
},
),
);
}),
),
),
),
);
}
}
import 'package:flutter/material.dart';
import 'package:rive/rive.dart';
class TabItem {
TabItem({
this.stateMachine = "",
this.artboard = "",
this.status,
});
UniqueKey? id = UniqueKey();
String stateMachine;
String artboard;
late SMIBool? status;
static List<TabItem> tabItemsList = [
TabItem(stateMachine: "HOME_Interactivity", artboard: "HOME"),
TabItem(stateMachine: "STAR_Interactivity", artboard: "STAR"),
TabItem(stateMachine: "USER_Interactivity", artboard: "USER"),
TabItem(stateMachine: "SETTINGS_Interactivity", artboard: "SETTINGS"),
];
}
In debug console says this and app pauses but when I try co continue it pauses again 5 or 6 times then it works, but icons are not showing upenter image description here