import 'package:diplomaticquarterapp/widgets/data_display/text.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class StepesWidget extends StatelessWidget { final int index; final Function changeCurrentTab; StepesWidget({Key key, this.index, this.changeCurrentTab}); @override Widget build(BuildContext context) { return Stack( children: [ Container( height: 50, width: MediaQuery.of(context).size.width, color: Colors.transparent, child: Center( child: Divider( color: Colors.black, height: 3, thickness: 3, ), ), ), Positioned( top: 10, left: 0, child: InkWell( onTap: () => changeCurrentTab(0), child: Container( width: 25, height: 25, decoration: BoxDecoration( shape: BoxShape.circle, color: index == 0 ? Colors.grey[800] : Colors.white, ), child: Center( child: Texts( '1', color: index == 0 ? Colors.white:Colors.grey[800] , ), ), ), ), ), Positioned( top: 10, left: MediaQuery.of(context).size.width *0.3, child: InkWell( onTap: () => changeCurrentTab(1), child: Container( width: 25, height: 25, decoration: BoxDecoration( shape: BoxShape.circle, color: index == 1 ? Colors.grey[800] : Colors.white, ), child: Center( child: Texts( '2', color: index == 1 ? Colors.white:Colors.grey[800], ), ), ), ), ), Positioned( top: 10, left: MediaQuery.of(context).size.width *0.6, child: InkWell( onTap: () => changeCurrentTab(2), child: Container( width: 25, height: 25, decoration: BoxDecoration( shape: BoxShape.circle, color: index == 2 ? Colors.grey[800] : Colors.white, ), child: Center( child: Texts( '3', color: index == 2 ? Colors.white: Colors.grey[800] , ), ), ), ), ), Positioned( top: 10, right: 0, child: InkWell( onTap: () => changeCurrentTab(3), child: Container( width: 25, height: 25, decoration: BoxDecoration( shape: BoxShape.circle, color: index == 3 ? Colors.grey[800] : Colors.white, ), child: Center( child: Texts( '4', color: index == 3 ? Colors.white:Colors.grey[800] , ), ), ), ), ), ], ); } }