i have a created an home page with app bar, bottom navigation bar,and a drop down menu. when i created a container box with it it isn't appearing on my screen. either it overlays the screen or it exceed the pixels and goes to the extreme right side.someone give me a solution and code and tell me where to add it please! (i have added two images also below one how i want and the other one how i got)
Expanded(child: Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.indigo,
borderRadius: BorderRadius.all(
Radius.circular(10.0)),
),
child: Text("\$27693.78"),
),
),
THIS IS THE CODE I GAVE FOR CONTAINER, THE WHOLE CODE FOR THE PAGE IS GIVEN BELOW
import 'package:flutter/material.dart';
class dashboard extends StatefulWidget {
const dashboard({super.key});
@override
State<dashboard> createState() => _dashboardState();
}
class _dashboardState extends State<dashboard> {
int index=0;
final screens = [
Center(child: Text('DASHBOARD', style: TextStyle(fontSize: 25))),
Center(child: Text('POS', style: TextStyle(fontSize: 25))),
Center(child: Text('ITEMS', style: TextStyle(fontSize: 25))),
Center(child: Text('LIMITED STOCKS', style: TextStyle(fontSize: 25))),
];
int _value = 1;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(appBar:
AppBar(
backgroundColor: Colors.white,
title: Text(''),
actions: <Widget>[
Icon(
Icons.shopping_cart_outlined,
color: Colors.indigo,
),
Padding(padding: EdgeInsets.all(20)),
Icon(
Icons.list,
color: Colors.indigo,
),
Padding(padding: EdgeInsets.all(10)),
],
),
body :Row (
children: <Widget>[Row
(children:
[Image.asset('assets/increase.png', width: 30,),
('Revenue Statistics',
style: TextStyle(
color: Colors.black,fontSize: 20,fontWeight: FontWeight.bold
),
),],),
Padding(padding: const EdgeInsets.only(left: 50, bottom: 25,)
),
Expanded(child: DropdownButton(
value: _value,
items: [
DropdownMenuItem(
child: Text('Overall'),
value: 1,
),
DropdownMenuItem(
child: Text('OverallA'),
value: 2,
),
],
onChanged: ( value){
setState(() {
_value = _value;
});
},
hint: Text('Select item'),
),
),
Padding(padding: EdgeInsets.only(left: 1)),
DecoratedBox(decoration:BoxDecoration(
borderRadius:BorderRadius.circular(5),
),
),
Expanded(child: Container(
margin:EdgeInsets.all(10),
padding:EdgeInsets.all(10),
alignment:Alignment.center,
decoration:BoxDecoration
(color:Colors.indigo,
borderRadius: BorderRadius.all(
Radius.circular(10.0)),
),
child: Text("\$27693.78"),
),
),
],
),
bottomNavigationBar:
NavigationBarTheme(
data: NavigationBarThemeData(
indicatorColor: Colors.indigo,
labelTextStyle: MaterialStateProperty.all(
TextStyle(fontSize: 14,fontWeight: FontWeight.w500,color: Colors.grey),
),
),child:
selectedIndex: index,
onDestinationSelected: (index)=>
setState(() => this.index = index),
destinations: [
NavigationDestination(
icon: Icon(Icons.dashboard),
label: 'Dashboard',
),
NavigationDestination(
icon: Icon(Icons.point_of_sale),
label: 'pos',
),
NavigationDestination(
icon: Icon(Icons.list),
label: 'items',
),
NavigationDestination(
icon: Icon(Icons.inventory),
label:
'limitedstocks',
),
],
),),
floatingActionButton: FloatingActionButton(
onPressed: (){},
child: Icon(
Icons.qr_code_scanner,
color: Colors.white,
),
backgroundColor: Colors.indigo,
tooltip: 'Scan QR',
elevation: 5,
),
floatingActionButtonLocation:FloatingActionButtonLocation.centerFloat,
),
);
}
}
Here is the Updated code:
class DashBoard extends StatefulWidget {
const DashBoard({super.key});
@override
State<DashBoard> createState() => _DashBoardState();
}
class _DashBoardState extends State<DashBoard> {
int index = 0;
final screens = [
const Center(child: Text('DASHBOARD', style: TextStyle(fontSize: 25))),
const Center(child: Text('POS', style: TextStyle(fontSize: 25))),
const Center(child: Text('ITEMS', style: TextStyle(fontSize: 25))),
const Center(child: Text('LIMITED STOCKS', style: TextStyle(fontSize: 25))),
];
int _value = 1;
Map<String, Color> cardDataList = {
'27639.78': Colors.indigoAccent,
'31193.78': Colors.orangeAccent,
'29474.78': Colors.blueAccent,
};
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: const Text(''),
actions: const <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: Icon(
Icons.shopping_cart_outlined,
color: Colors.indigo,
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: Icon(
Icons.list,
color: Colors.indigo,
),
),
],
),
body: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Row(
children: [
Image.asset(
'assets/increase.json',
width: 30,
),
const Text(
'Revenue Statistics',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
const SizedBox(
width: 20,
),
Expanded(
child: DropdownButton(
isExpanded: true,
value: _value,
items: const [
DropdownMenuItem(
value: 1,
child: Text('Overall'),
),
DropdownMenuItem(
value: 2,
child: Text('OverallA'),
),
],
onChanged: (value) {
setState(() {
_value = _value;
});
},
hint: const Text('Select item'),
),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: SizedBox(
height: 200,
child: ListView.builder(
itemCount: cardDataList.values.length,
shrinkWrap: true,
scrollDirection: Axis.horizontal,
physics: const BouncingScrollPhysics(),
itemBuilder: (context, index) => _customCard(
cardDataList.values.toList()[index],
cardDataList.keys.toList()[index])),
),
)
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.indigo,
tooltip: 'Scan QR',
elevation: 5,
child: const Icon(
Icons.qr_code_scanner,
color: Colors.white,
),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerFloat,
bottomNavigationBar: NavigationBarTheme(
data: NavigationBarThemeData(
indicatorColor: Colors.indigo,
labelTextStyle: MaterialStateProperty.all(
const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Colors.grey),
),
),
child: NavigationBar(
selectedIndex: index,
onDestinationSelected: (index) =>
setState(() => this.index = index),
destinations: const [
NavigationDestination(
icon: Icon(Icons.dashboard),
label: 'Dashboard',
),
NavigationDestination(
icon: Icon(Icons.point_of_sale),
label: 'pos',
),
NavigationDestination(
icon: Icon(Icons.list),
label: 'items',
),
NavigationDestination(
icon: Icon(Icons.inventory),
label: 'limitedstocks',
),
],
),
)));
}
Widget _customCard(Color cardColor, String amount) {
return Container(
width: 250,
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: cardColor,
borderRadius: const BorderRadius.all(Radius.circular(10.0)),
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Align(
alignment: Alignment.topRight,
child: Icon(
Icons.monetization_on_rounded,
color: Colors.white,
)),
Column(
children: [
Text(
"\$$amount",
style: const TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
const Text(
"Total Revenue",
style: TextStyle(color: Colors.white),
),
],
),
],
),
),
);
}
}
And please stop using Padding widget to add space between, you can use SizedBox and if you want to give padding to and widget then add Pending Widget and add the widget in the child.
And class name should be in CamelCase.