Related
i want the popular menu to scroll down as i scroll on the whole page , not as it is right now scrolling only on that little part
its a Listview.builder inside a Listview
Demo : https://i.stack.imgur.com/TZ8xH.gif
here is the full code
its commented where the Listview and Listview.builder are
ctrl+f search this "//////" to quickly find them
import 'dart:async';
import 'package:custom_refresh_indicator/custom_refresh_indicator.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:foodninja/consts.dart';
import 'package:lottie/lottie.dart';
Color whiteBcg = const Color.fromARGB(255, 255, 255, 255);
Color limeColor = const Color.fromARGB(204, 77, 200, 118);
Color blackColor = Colors.black;
Color orangeInside = const Color.fromARGB(255, 210, 122, 0);
Color orangeOutside = const Color.fromARGB(45, 210, 123, 0);
Color cardBcg = const Color.fromRGBO(238, 238, 238, 1);
Color subText = const Color.fromARGB(255, 164, 164, 164);
class MyIconButton extends StatelessWidget {
const MyIconButton({
Key? key,
required this.icon,
required this.onClickAction,
}) : super(key: key);
final IconData icon;
final Function onClickAction;
#override
Widget build(BuildContext context) {
return Container(
height: 50,
width: 50,
decoration: BoxDecoration(
color: orangeOutside,
// border: Border.all(
// color: Colors.red,
// ),
borderRadius: BorderRadius.circular(15)),
child: TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
const Color.fromARGB(2, 255, 149, 0)),
),
onPressed: () => onClickAction(),
child: Icon(
icon,
color: orangeInside,
),
));
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
double h = MediaQuery.of(context).size.height;
double w = MediaQuery.of(context).size.width;
return Scaffold(
body: CustomRefreshIndicator(
onRefresh: () {
return Future(
() {},
);
},
builder: (
BuildContext context,
Widget child,
IndicatorController controller,
) {
return AnimatedBuilder(
animation: controller,
builder: (BuildContext context, _) {
return Stack(
children: <Widget>[
if (controller.isDragging ||
controller.isArmed ||
controller.isLoading)
Positioned(
left: w * 0.37,
top: controller.value * 50,
child: SizedBox(
height: 100,
width: 100,
child: Transform.translate(
offset: Offset(0, controller.value * 20),
child: Transform.scale(
scale: controller.value *1.5,
child:
Lottie.asset("assets/burgerBounce.json"))),
),
),
// if (controller.isArmed)
// Positioned(
// left: 0,
// top: 25 * controller.value,
// child: SizedBox(
// height: 100,
// width: 100,
// child: Lottie.asset("assets/icecream.json"),
// ),
// ),
Transform.translate(
offset: const Offset(0, 0),
child: child,
)
],
);
},
);
},
child: ListView(physics: const BouncingScrollPhysics(), children: [ ///////the list view
SafeArea(
child: Stack(children: [
SizedBox(
width: 500,
child: Image.asset(
'assets/PhoneVerificationPattern.png',
fit: BoxFit.fill,
),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"Find your \nfavorite food",
style: TextStyle(
fontSize: 35, fontWeight: FontWeight.bold),
),
MyIconButton(
icon: Icons.notifications_none,
onClickAction: () {},
),
]),
const SizedBox(
height: 20,
),
Container(
alignment: Alignment.center,
height: 70,
width: w,
decoration: BoxDecoration(
color: orangeOutside,
// border: Border.all(
// color: Colors.red,
// ),
borderRadius: BorderRadius.circular(15)),
child: TextFormField(
style: TextStyle(color: orangeInside),
decoration: InputDecoration(
hintText: "what do you want to order ?",
hintStyle: TextStyle(color: orangeInside),
prefixIconColor: orangeInside,
fillColor: orangeInside,
focusColor: orangeInside,
border: InputBorder.none,
focusedBorder: InputBorder.none,
prefixIcon: Icon(
Icons.search,
color: orangeInside,
),
contentPadding:
EdgeInsets.fromLTRB(0, 14, 0, 0))),
),
const SizedBox(
height: 20,
),
PromoAdvert(h: h, w: w),
const SizedBox(
height: 15,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"Nearest resturants",
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold),
),
RichText(
text: TextSpan(
children: [
TextSpan(
text: "View more",
style: TextStyle(
fontSize: 15,
color: orangeInside,
),
recognizer: TapGestureRecognizer()
..onTap = () {}),
],
),
),
],
),
const SizedBox(
height: 15,
),
NearestResturants(w: w, h: h),
const SizedBox(
height: 15,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"Popular menu",
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold),
),
RichText(
text: TextSpan(
children: [
TextSpan(
text: "View more",
style: TextStyle(
fontSize: 15,
color: orangeInside,
),
recognizer: TapGestureRecognizer()
..onTap = () {}),
],
),
),
],
),
const SizedBox(
height: 20,
),
SizedBox(
height: 70,
width: 400,
child: ListView.builder( ////////////////List view builder where the problem is
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: 4,
itemBuilder: (context, index) => Container(
height: 70,
width: 400,
decoration: BoxDecoration(
color: cardBcg,
// border: Border.all(
// color: Colors.red,
// ),
borderRadius: BorderRadius.circular(15)),
child: Row(
children: [
Padding(
padding:
const EdgeInsets.fromLTRB(9, 5, 0, 5),
child: Container(
width: 50,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
nearestResturantsContentList[index]
.image,
),
),
borderRadius: BorderRadius.circular(15),
),
),
),
const SizedBox(
width: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Fruit Salade ",
textAlign: TextAlign.start,
),
Text(
"Vegan resto",
textAlign: TextAlign.start,
style: TextStyle(color: subText),
),
],
),
const SizedBox(
width: 150,
),
Text(
"7\$",
textAlign: TextAlign.start,
style: TextStyle(
color: const Color.fromARGB(
255, 254, 171, 29),
fontSize: 23),
)
],
)),
),
),
],
),
)
]),
),
]),
),
);
}
}
class NearestResturantsContent {
late String image;
late String text;
late String subText;
NearestResturantsContent(
this.image,
this.text,
this.subText,
);
}
List<NearestResturantsContent> nearestResturantsContentList = [
NearestResturantsContent(
"assets/veganRestoLogo.png",
"veganResto",
"3KM",
),
NearestResturantsContent(
"assets/AjintiLogo.png",
"Ajinti",
"6KM",
),
NearestResturantsContent(
"assets/ChefGoLogo.png",
"ChefGo",
"10KM",
),
NearestResturantsContent(
"assets/BakeryLogo.png",
"Bakery",
"3KM",
),
NearestResturantsContent(
"assets/healthyFoodLogo.png",
"healthyFood",
"5KM",
),
NearestResturantsContent(
"assets/windowstoLogo.png",
"windowsto",
"3KM",
),
];
class NearestResturants extends StatelessWidget {
const NearestResturants({
Key? key,
required this.w,
required this.h,
}) : super(key: key);
final double w;
final double h;
#override
Widget build(BuildContext context) {
return SizedBox(
width: w,
height: h * 0.22,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: nearestResturantsContentList.length,
itemBuilder: (context, index) {
return Container(
margin: const EdgeInsets.fromLTRB(0, 0, 10, 0),
width: w * 0.4,
height: h * 0.22,
decoration: BoxDecoration(
color: cardBcg,
// border: Border.all(
// color: Colors.red,
// ),
borderRadius: BorderRadius.circular(15)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
child: SizedBox(
height: 90,
width: 90,
child: Image.asset(
nearestResturantsContentList[index].image,
fit: BoxFit.fill,
),
),
),
Text(
nearestResturantsContentList[index].text,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
overflow: TextOverflow.ellipsis),
),
const SizedBox(
height: 5,
),
Text(
nearestResturantsContentList[index].subText,
style: TextStyle(
color: subText,
fontSize: 13,
fontWeight: FontWeight.bold,
overflow: TextOverflow.ellipsis),
),
],
),
);
},
),
);
}
}
class PromoAdvertContent {
late String image;
late String text;
late String subText;
late Color color;
PromoAdvertContent(this.image, this.text, this.subText, this.color);
}
List<PromoAdvertContent> promoAdvertContentList = [
PromoAdvertContent("assets/promoAdvert.png", "Special deal for \nOctober",
"Buy now", limeColor),
PromoAdvertContent("assets/promoAdvert.png", "Special deal for \nOctober",
"check out", orangeInside),
PromoAdvertContent(
"assets/promoAdvert.png", "No way this \nOctober", "check out", subText)
];
class PromoAdvert extends StatelessWidget {
const PromoAdvert({
Key? key,
required this.h,
required this.w,
}) : super(key: key);
final double h;
final double w;
#override
Widget build(BuildContext context) {
bool isScrollingToRight = true;
int currentPage = 0;
PageController scrollController = PageController(initialPage: 0);
void _scrollToBottom() {
if (currentPage < promoAdvertContentList.length && isScrollingToRight) {
currentPage++;
} else if (!isScrollingToRight && currentPage == 0) {
currentPage++;
isScrollingToRight = true;
} else {
isScrollingToRight = false;
currentPage--;
}
if (scrollController.hasClients) {
scrollController.animateToPage(
currentPage,
duration: const Duration(milliseconds: 1000),
curve: Curves.easeOut,
);
}
}
WidgetsBinding.instance.addPostFrameCallback(
(_) => Timer.periodic(const Duration(seconds: 15), (_) {
_scrollToBottom();
}));
return SizedBox(
width: w,
height: h * 0.217,
child: CustomRefreshIndicator(
onRefresh: () {
return Future(
() {},
);
},
builder: (
BuildContext context,
Widget child,
IndicatorController controller,
) {
return AnimatedBuilder(
animation: controller,
builder: (BuildContext context, _) {
return Stack(
children: <Widget>[
if (controller.isDragging ||
controller.isArmed ||
controller.isLoading)
Positioned(
left: 0,
top: h * 0.05,
child: SizedBox(
height: 100,
width: 100,
child: Transform.translate(
offset: Offset(-controller.value * 20, 0),
child: Transform.rotate(
angle: 11,
child: Lottie.asset("assets/icecream.json"))),
),
),
// if (controller.isArmed)
// Positioned(
// left: 0,
// top: 25 * controller.value,
// child: SizedBox(
// height: 100,
// width: 100,
// child: Lottie.asset("assets/icecream.json"),
// ),
// ),
Transform.translate(
offset: const Offset(0, 0),
child: child,
)
],
);
},
);
},
child: PageView.builder(
controller: scrollController,
physics: const BouncingScrollPhysics(),
scrollDirection: Axis.horizontal,
itemCount: promoAdvertContentList.length,
itemBuilder: (context, index) {
if (promoAdvertContentList.length == index) {
print('a"sqdqsqs');
CircularProgressIndicator();
}
return Container(
width: h * 0.47,
height: 160,
decoration: BoxDecoration(
color: promoAdvertContentList[index].color,
// border: Border.all(
// color: Colors.red,
// ),
borderRadius: BorderRadius.circular(15)),
child: Stack(children: [
SizedBox(
height: 160,
width: h * 0.47,
child: Image.asset(
promoAdvertContentList[index].image,
fit: BoxFit.fill,
),
),
Positioned(
top: 30,
right: 5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
promoAdvertContentList[index].text,
style: TextStyle(
color: whiteBcg,
fontSize: 20,
fontWeight: FontWeight.bold),
),
const SizedBox(
height: 10,
),
NextButton(
h: h,
w: w,
text: promoAdvertContentList[index].subText,
)
],
))
]),
);
},
),
),
);
}
}
class NextButton extends StatelessWidget {
const NextButton({
Key? key,
required this.h,
required this.w,
required this.text,
}) : super(key: key);
final double h;
final double w;
final String text;
#override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
height: 45,
width: 100,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
elevation: 5,
child: TextButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
)),
backgroundColor: MaterialStateProperty.all<Color>(whiteBcg)),
onPressed: () {},
child: Text(
text,
style: TextStyle(color: limeColor, fontSize: 15),
overflow: TextOverflow.ellipsis,
softWrap: false,
)),
),
),
);
}
}
To the list view that is scrolling separately add physics
physics: NeverScrollableScrollPhysics(),
And remove sized box which is wrapping the listview
enter image description here
Hello, I want to keep and hide few things on scroll from SliverAppBar bottom section. For example, when I scroll the list from top to bottom, the logo , branch, distance, etc should hide. The leading, title, actions, and restaurant title will be shown. Below is my code, Can anyone please help?
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:urmenuz/constants/styles.dart';
import 'package:urmenuz/widgets/hidable/hidable.dart';
import '../../constants/colors.dart';
import '../../constants/configs.dart';
import '../../utils/rating_bar.dart';
import 'package:flutter/rendering.dart';
class MenuHeader extends SliverAppBar {
final expandedHeight;
final collapsedHeight;
final bool dineIn;
final Function backFunction;
final Function menuFunction;
final Function infoFunction;
final Function serviceIconFunction;
final Widget tblTextField;
final ScrollController scrollController;
MenuHeader({
this.expandedHeight = 350,
this.collapsedHeight = 160,
this.dineIn = true,
required this.backFunction,
required this.menuFunction,
required this.infoFunction,
required this.serviceIconFunction,
required this.scrollController,
required this.tblTextField,
}) : super(
elevation: 0.0,
pinned: true,
floating: false,
snap: false,
forceElevated: true);
Color? get backgroundColor => AppColors.lightGrey;
// #override
// Widget? get background => Image.asset(IMAGE_ASSET_DIR + 'background2.png',
// fit: BoxFit.cover,
// );
#override
Widget? get leading {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: GestureDetector(
onTap: () => backFunction(),
child: Container(
height: 36,
width: 36,
decoration: BoxDecoration(
color: AppColors.lightRed,
borderRadius: BorderRadius.circular(10)),
child: Center(
child: Icon(
Icons.arrow_back_ios_new,
color: Colors.black,
)),
),
),
);
}
#override
Widget? get title {
return Text(
'urMenu',
style: TextStyle(
color: AppColors.lightGrey,
fontWeight: FontWeight.w600,
fontSize: 20),
);
}
#override
List<Widget>? get actions {
return [
Row(
children: [
GestureDetector(
onTap: () => serviceIconFunction(),
child: Image.asset(
IMAGE_ASSET_DIR + "${dineIn ? "dine_in" : "pick_up"}.png",
height: 40,
width: 40,
),
),
SizedBox(
width: 20,
),
Container(
height: 36,
width: 36,
margin: EdgeInsets.only(right: 20),
decoration: BoxDecoration(
color: AppColors.lightRed,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: AppColors.grey.withOpacity(0.1),
offset: Offset(0.0, 0.0), //(x,y)
blurRadius: 4.0,
),
],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: () => menuFunction(),
child: Image.asset(
IMAGE_ASSET_DIR + 'menu.png',
color: Colors.black,
)),
)),
],
),
];
}
#override
PreferredSizeWidget? get bottom {
return PreferredSize(
preferredSize: const Size.fromHeight(70),
child: Container(
color: Colors.transparent,
height: 160,
child: Padding(
padding: const EdgeInsets.only(bottom: 50),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Stack(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
// color: Colors.yellow,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.3),
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 6.0,
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7-G-E4aXWzIoakYj-4VpNF8tp5hiaUC5K7yZGDaEjaNddIRMWcvV9lJU1_3F1q_RVqIM&usqp=CAU",
height: 75,
width: 75,
),
),
),
],
),
),
const SizedBox(
width: 12,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
// SizedBox(
// height: 3,
// ),
const Text(
"Branch",
style: TextStyle(
color: AppColors.lightGrey,
fontSize: 14,
fontWeight: FontWeight.w500),
),
const SizedBox(
height: 3,
),
Text(
"The Butcher Shop & Grill",
maxLines: 1,
softWrap: true,
// .toUpperCase(),
style: const TextStyle(
color: AppColors.lightGrey,
fontSize: 20,
fontWeight: FontWeight.bold),
),
const SizedBox(
height: 6,
),
buildRatebar(12, 6, gap: .9),
]),
],
),
// Positioned(
// right: 20,
// child: GestureDetector(
// onTap: () => infoFunction(),
// child: Container(
// decoration: BoxDecoration(
// color: AppColors.lightGrey,
// borderRadius: BorderRadius.circular(20)),
// child: Padding(
// padding: EdgeInsets.all(3),
// child: Image.asset(
// IMAGE_ASSET_DIR + 'info_icon_single.png',
// height: 12,
// width: 12,
// color: dineIn ? AppColors.red : AppColors.orange,
// ),
// )),
// ),
// )
],
),
Padding(
padding: const EdgeInsets.only(right: 20, left: 20, top: 10),
child: Row(
children: [
if (dineIn) tblTextField,
// Text(
// '+ Enter Table #',
// style: TextStyle(
// color: AppColors.lightGrey,
// fontWeight: FontWeight.w500,
// fontSize: 14),
// ),
Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Styles.iconButtonWithShape(
Image.asset(
IMAGE_ASSET_DIR + 'location_icon.png',
height: 9,
color: dineIn ? AppColors.red : AppColors.orange,
),
// FaIcon(
// FontAwesomeIcons.locationArrow,
// color: dineIn ? AppColors.red : AppColors.orange,
// size: 12,
// ),
height: 22,
width: 22,
isCircle: true,
showShadow: false,
backgroundColor: dineIn
? AppColors.lightRed
: AppColors.lightOrange,
handler: () {}),
const SizedBox(
width: 6,
),
Text(
"5 KM",
style: TextStyle(
color: AppColors.lightGrey, fontSize: 12),
),
],
),
],
),
)
],
),
),
), // Add this code
);
}
#override
Widget? get flexibleSpace {
return ShaderMask(
// gradient layer ----------------------------
shaderCallback: (bound) {
return LinearGradient(
end: FractionalOffset.topCenter,
begin: FractionalOffset.bottomCenter,
colors: [
Colors.black.withOpacity(0.76),
Colors.black.withOpacity(0.66),
Colors.black26,
],
stops: [
0.0,
0.3,
0.45
]).createShader(bound);
},
blendMode: BlendMode.srcOver,
// your widget ------------------------
child: Container(
// constraints: const BoxConstraints(
// minWidth: 350,
// maxHeight: 350,
// ),
padding: EdgeInsets.all(10),
height: 350,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://media-cdn.tripadvisor.com/media/photo-s/1b/67/cc/f8/chestnut-restaurant.jpg'),
fit: BoxFit.cover),
)),
);
}
}
I have gridviewbuilder that takes data from itemGriddata which has onTap function that directs it to a new page that takes data from that model as well but when I click on it the error in the title appears, any help or some kind of enlightement would be appreciated
this is gridview page
import 'package:flutter/material.dart';
import 'package:wild_wild_rift/builds/SinglePage.dart';
import 'package:wild_wild_rift/data/model.dart';
import 'package:google_fonts/google_fonts.dart';
class GridViewPage extends StatefulWidget {
#override
_GridViewPage createState() => _GridViewPage();
}
class _GridViewPage extends State<GridViewPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.grey,
automaticallyImplyLeading: true,
title: const Text(
'Champions',
style: TextStyle(
fontFamily: 'Lexend Doca',
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
elevation: 2,
),
body: Column(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Padding(
padding: const EdgeInsetsDirectional.fromSTEB(15, 15, 15, 15),
child: GridView.builder(
itemCount: itemGriddata.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
childAspectRatio: 1,
),
itemBuilder: (context, index) {
return GridSingleItem(
itemGriddata: itemGriddata[index],
onTap: () async {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SinglePage(itemGriddata[index])));
},
);
},
),
),
),
],
));
}
}
class GridSingleItem extends StatelessWidget {
final itemGriddata;
final Function onTap;
const GridSingleItem({Key key, #required this.itemGriddata, this.onTap})
: super(key: key);
#override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
child: ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: const Color(0xEEEEEE),
image: DecorationImage(
fit: BoxFit.cover,
image: Image.asset(itemGriddata.image).image,
),
boxShadow: const [
BoxShadow(
blurRadius: 3,
color: Color(0xDA000000),
)
],
borderRadius: BorderRadius.circular(9),
border: Border.all(
color: Colors.black,
),
),
child: Align(
alignment: AlignmentDirectional(-0.45, 0.85),
child: Text(
itemGriddata.name,
style: TextStyle(
fontFamily: 'Lexend Deca',
color: Color(0xFFFFFCFC),
fontWeight: FontWeight.normal,
shadows: [
Shadow(
blurRadius: 8.0,
color: Colors.black,
offset: Offset(1.0, 1.0),
),
],
),
),
),
),
),
);
}
}
this is page that I'd want to take data
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import '../data/model.dart';
class SinglePage extends StatefulWidget {
#override
_SinglePage createState() => _SinglePage();
final Data data;
SinglePage(this.data);
}
class _SinglePage extends State<SinglePage> {
PageController pageViewController;
bool isFirstButton = false;
bool isSecondButton = false;
#override
void initState() {
super.initState();
pageViewController = PageController(initialPage: 0);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xFF090F13),
automaticallyImplyLeading: true,
title: Text(
itemGriddata.name,
style: TextStyle(
fontFamily: 'Lexend Deca',
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
actions: const [],
centerTitle: false,
elevation: 2,
),
backgroundColor: const Color(0xFF262D34),
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(0, 0, 0, 25),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Row(
mainAxisSize: MainAxisSize.max,
children: [
Material(
color: Colors.transparent,
elevation: 3,
child: Container(
width: MediaQuery.of(context).size.width,
height: 150,
decoration: BoxDecoration(
color: const Color(0xFF090F13),
image: DecorationImage(
fit: BoxFit.cover,
image: Image.asset(
itemGriddata.backgroundimage,
).image,
),
),
),
),
],
),
Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(20, 12, 20, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: const [
Text(
'Choose role',
style: TextStyle(
fontFamily: 'Lexend Deca',
color: Color(0xFF8B97A2),
fontSize: 14,
fontWeight: FontWeight.normal,
),
),
],
),
),
Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(0, 12, 1, 0),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(
16, 0, 0, 0),
child: InkWell(
onTap: () async {
isSecondButton = false;
isFirstButton = true;
setState(() {});
await pageViewController.animateToPage(
0,
duration: const Duration(milliseconds: 500),
curve: Curves.ease,
);
},
child: Material(
color: Colors.transparent,
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: const Color(0xFF090F13),
borderRadius: BorderRadius.circular(8),
shape: BoxShape.rectangle,
border: isFirstButton
? Border.all(color: Colors.white)
: null),
child: Stack(
children: [
Align(
alignment: const AlignmentDirectional(
0, -0.05),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Image.asset(
'assets/images/icon-position-jungle.png',
width: 50,
height: 50,
fit: BoxFit.cover,
),
const Padding(
padding: EdgeInsetsDirectional
.fromSTEB(0, 8, 0, 0),
child: AutoSizeText(
'BUILD 1',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Lexend Deca',
color: Color(0xFF8B97A2),
fontSize: 14,
fontWeight:
FontWeight.normal,
),
),
),
],
),
),
],
),
),
),
),
),
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(
16, 0, 0, 0),
child: Material(
color: Colors.transparent,
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: const Color(0xFF090F13),
borderRadius: BorderRadius.circular(8),
border: isSecondButton
? Border.all(color: Colors.white)
: null),
child: InkWell(
onTap: () async {
isSecondButton = true;
isFirstButton = false;
setState(() {});
await pageViewController.animateToPage(
1,
duration:
const Duration(milliseconds: 500),
curve: Curves.ease,
);
},
child: Stack(
children: [
Align(
alignment: const AlignmentDirectional(
0, -0.05),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Image.asset(
'assets/images/icon-position-jungle.png',
width: 50,
height: 50,
fit: BoxFit.cover,
),
const Padding(
padding: EdgeInsetsDirectional
.fromSTEB(0, 8, 0, 0),
child: AutoSizeText(
'BUILD 2',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Lexend Deca',
color: Color(0xFF8B97A2),
fontSize: 14,
fontWeight:
FontWeight.normal,
),
),
),
],
),
),
],
),
),
),
),
),
],
),
),
),
Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(20, 8, 20, 8),
child: Row(
mainAxisSize: MainAxisSize.max,
children: const [
Text(
'Builds',
style: TextStyle(
fontFamily: 'Lexend Deca',
color: Color(0xFF8B97A2),
fontSize: 14,
fontWeight: FontWeight.normal,
),
),
],
),
),
SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(
16, 8, 16, 0),
child: Container(
width: MediaQuery.of(context).size.width,
height: 200,
decoration: BoxDecoration(
color: const Color(0x00090F13),
boxShadow: const [
BoxShadow(
blurRadius: 3,
color: Colors.transparent,
offset: Offset(0, 2),
)
],
borderRadius: BorderRadius.circular(8),
),
child: SizedBox(
width: double.infinity,
height: 500,
child: PageView(
controller: pageViewController,
scrollDirection: Axis.horizontal,
children: [
Image.asset(
'assets/images/image_1.png',
width: 100,
height: 100,
fit: BoxFit.cover,
),
Image.asset(
'assets/images/image_2.png',
width: 100,
height: 100,
fit: BoxFit.scaleDown,
),
],
),
),
),
),
],
),
),
],
),
),
),
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(20, 0, 20, 8),
child: Row(
mainAxisSize: MainAxisSize.max,
children: const [
Text(
'Text',
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xFF8B97A2),
),
),
],
),
),
],
),
),
);
}
}
and this is the model with data
final dynamic itemGriddata = [
Data(
name: "Ahri",
image: "assets/images/Ahri.png",
backgroundimage: "assets/images/Ahri_0.jpg"),
Data(
name: "Akali",
image: "assets/images/Akali.png",
backgroundimage: "assets/images/Akali_0.jpg")
];
class Data {
final String name;
final String image;
final String backgroundimage;
Data({this.name, this.image, this.backgroundimage});
}
The issue is that your SinglePage widget has a prop named final Data data; but the _SinglePageState widget is calling itemGriddata for your title and images. You'll need to change your code like so:
class SinglePage extends StatefulWidget {
const SinglePage(Key? key, this.data): super(key: key);
final Data data;
#override
State<StatefulWidget> createState() => _SinglePageState();
}
class _SinglePageState extends State<SinglePage> {
// use widget.data to get name, image, and backgroundImage
// ex... widget.data.name or widget.data.image
#override
Widget build(BuildContext context) {
return Text(widget.data.name);
}
}
You're passing the data correctly to SinglePage, but just change a few lines to ensure you're calling something with actual data! :D
I have a home page with 5 bottomnavbar items (just like instagram) and I need to pass a boolean to one of the pages. I'm using auto_route to navigate.
AutoRoute(
path: '/home',
name: 'HomeRouter',
page: Home,
children: [
AutoRoute(
path: 'timeline',
name: 'TimelineRouter',
page: Timeline,
),
AutoRoute(
path: 'profile',
name: 'ProfileRouter',
page: EmptyRouterPage,
children: [
AutoRoute(
path: '',
page: Profile, <-----
),
AutoRoute(
path: ":currentUserId",
name: "EditProfileRouter",
page: EditProfile,
),
],
),
],
)
I need to pass a boolean to the profile page but I'm not sure how to do that using auto_route. Any hints?
When I passed a boolean, the page received a null value for some reason. What could be the possible reason for getting a null value?
This answer is coming straight from the auto_route API documentation:
AutoRoute automatically detects and handles your page arguments for
you, the generated route object will deliver all the arguments your
page needs including path/query params.
e.g. The following page widget will take an argument of type Book.
class BookDetailsPage extends StatelessWidget {
const BookDetailsPage({required this.book});
final Book book;
...
The generated BookDetailsRoute will deliver the same arguments to it's
corresponding page.
router.push(BookDetailsRoute(book: book));
I used a bool value on the profile page to remove the leading icon while I am calling on the bottom navbar so I am sharing my code I Hope this will work for you.Thanks
////Bottom Navigation page
import 'package:flutter/material.dart';
import 'package:traveling/helpers/AppColors.dart';
import 'package:traveling/screens/Employee/home/Home.dart';
import 'package:traveling/screens/Employee/profile/Profile.dart';
import 'package:traveling/screens/Employee/setting/Setting.dart';
class EmployeeBottomNavBar extends StatefulWidget {
const EmployeeBottomNavBar({Key? key}) : super(key: key);
#override
_EmployeeBottomNavBarState createState() => _EmployeeBottomNavBarState();
}
class _EmployeeBottomNavBarState extends State<EmployeeBottomNavBar> {
int pageIndex = 0;
bool visible = true;
List<Widget> pageList = <Widget>[EmployeeHome(), EmployeeProfile(leadingIcon: false,), Setting()];
#override
Widget build(BuildContext context) {
return Scaffold(
body: pageList[pageIndex],
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.redAccent[400],
currentIndex: pageIndex,
onTap: (value) {
setState(() {
pageIndex = value;
});
},
// type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
activeIcon: Container(
height: 40,
width: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xff2161c0),
),
child: Icon(
Icons.home,
color: AppColors.white,
),
),
icon: Icon(
Icons.home,
color: Color(0xff2161c0),
),
label: ""),
BottomNavigationBarItem(
activeIcon: Container(
height: 40,
width: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xff2161c0),
),
child: Icon(
Icons.person,
color: AppColors.white,
),
),
icon: Icon(
Icons.person,
color: AppColors.baseLightBlueColor,
),
label: ""),
BottomNavigationBarItem(
activeIcon: Container(
height: 40,
width: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColors.baseLightBlueColor,
),
child: Icon(
Icons.settings,
color: AppColors.white,
),
),
icon: Icon(
Icons.settings,
color: AppColors.baseLightBlueColor,
),
label: ""),
]
)
);
}
}
///////Profile page
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:traveling/helpers/AppColors.dart';
import 'package:traveling/helpers/AppStrings.dart';
class EmployeeProfile extends StatefulWidget {
final bool leadingIcon;
EmployeeProfile({Key? key, required this.leadingIcon}) : super(key: key);
#override
_EmployeeProfileState createState() => _EmployeeProfileState();
}
class _EmployeeProfileState extends State<EmployeeProfile> {
bool? visible;
double? _width;
File ?_image;
final picker = ImagePicker();
Future<void>_showChoiceDialog(BuildContext context)
{
return showDialog(context: context,builder: (BuildContext context){
return AlertDialog(
title: Text("Choose option",style: TextStyle(color: AppColors.hotelListDarkBlue),),
content: SingleChildScrollView(
child: ListBody(
children: [
Divider(height: 1,color: AppColors.baseLightBlueColor,),
ListTile(
onTap: (){
Navigator.pop(context,_getImage(ImageSource.gallery));
},
title: Text("Gallery",style: TextStyle(color: AppColors.hotelListDarkBlue),),
leading: Icon(Icons.account_box,color: AppColors.baseLightBlueColor,),
),
Divider(height: 1,color: AppColors.baseLightBlueColor,),
ListTile(
onTap: (){
Navigator.pop(context,_getImage(ImageSource.gallery));
},
title: Text("Camera",style: TextStyle(color: AppColors.hotelListDarkBlue),),
leading: Icon(Icons.camera,color: AppColors.baseLightBlueColor,),
),
],
),
),);
});
}
#override
Widget build(BuildContext context) {
_width = MediaQuery.of(context).size.width;
return Scaffold(
body: ListView(
shrinkWrap: true,
children: [
Container(
width: _width!,
color: AppColors.white,
child: Stack(
children: [
Column(
children: [
Material(
color: AppColors.baseLightBlueColor,
elevation: 15,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.only(bottomRight: Radius.circular(30)),
),
child: Container(
height: 180,
decoration: BoxDecoration(
color: AppColors.baseLightBlueColor,
// AppColors.blue,
borderRadius:
BorderRadius.only(bottomRight: Radius.circular(30)),
),
),
),
Container(
// color: AppColors.green,
width: _width! * 0.90,
height: 140,
margin: EdgeInsets.only(top: 60),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
AppStrings.personalInformation,
// "Informations personelles",
style: TextStyle(
color: Color(0xff919AAA),
),
)
],
),
Row(
children: [
Container(
height: 100,
width: 50,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
AppStrings.name,
style: TextStyle(
fontSize: 15,
color: AppColors.hotelListDarkBlue,
),
),
Text(
AppStrings.email,
style: TextStyle(
fontSize: 15,
color: AppColors.hotelListDarkBlue,
),
),
Text(
AppStrings.phone,
// "Phone",
style: TextStyle(
fontSize: 15,
color: AppColors.hotelListDarkBlue,
),
),
],
),
),
SizedBox(
height: 100,
width: 30,
),
Container(
height: 100,
width: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Laure Beno",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: AppColors.hotelListDarkBlue,
),
),
Text(
"laure.beno#gmail.com",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: AppColors.hotelListDarkBlue,
),
),
Text("+33 (0)6 45 23 65 77",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: AppColors.hotelListDarkBlue,
)),
],
),
),
],
),
],
),
),
Container(
width: _width! * 0.87,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
AppStrings.myPoetryModes,
style: TextStyle(
color: AppColors.hotelListLightGreyColor,
),
),
Text(
"+ " + AppStrings.add,
style: TextStyle(
color: AppColors.hotelListLightGreyColor,
),
),
],
),
),
SizedBox(
height: 20,
),
Container(
width: _width! * 0.90,
child: atmCard(
cardName: "VISA",
image: "assets/Visa.png",
height: 10)),
Container(
width: _width! * 0.90,
child: atmCard(
cardName: "Master Card",
image: "assets/MasterCard.png",
height: 20)),
],
),
Positioned(
top: 80,
child: _image==null?Stack(
children: [
Container(
height: 150,
width:_width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 120,
width: 120,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(60),
border: Border.all(color: AppColors.white, width: 2.0),
image: DecorationImage(
image: AssetImage("assets/managerPicture.jpeg"),fit: BoxFit.cover,
)
/*gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Color(0xff00519E),
AppColors.blue,
Colors.blue.shade900,
],
)*/
),
/* child: ClipRRect(
borderRadius: BorderRadius.circular(60.0),
child: Image.asset("assets/manager.jpeg",height: 100,width: 100,)
//Icon(Icons.person, size: 100),
// child: Image.asset("assets/logo/profile.png", fit: BoxFit.fill),
),*/
),
],
),
),
Positioned(
top: 60,
right: 0,
left: 100,
bottom: 0,
child: GestureDetector(
onTap: (){
_showChoiceDialog(context);
},
child: Container(
height: 10,
width: _width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 35,
width: 35,
decoration: BoxDecoration(
color: AppColors.profiePicBackground,
borderRadius: BorderRadius.circular(60),
//border: Border.all(color: Colors.blue.shade900, width: 2.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(60.0),
child: Icon(MdiIcons.squareEditOutline,color: AppColors.popUpBlueColor,size: 20,),
),
),
],
),
),
),)
],
):Stack(
children: [
Container(
height: 150,
width:_width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 120,
width: 120,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: FileImage(_image!),
),
border: Border.all(color: AppColors.white, width: 2.0),
),
),
],
),
),
Positioned(
top: 60,
right: 0,
left: 100,
bottom: 0,
child: GestureDetector(
onTap: (){
_showChoiceDialog(context);
},
child: Container(
height: 10,
width: _width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 35,
width: 35,
decoration: BoxDecoration(
color: AppColors.profiePicBackground,
borderRadius: BorderRadius.circular(60),
//border: Border.all(color: Colors.blue.shade900, width: 2.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(60.0),
child: Icon(MdiIcons.squareEditOutline,color: AppColors.popUpBlueColor,size: 20,),
),
),
],
),
),
),)
],
)
),
Positioned(
top: 40,
child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(left:8,right: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
widget.leadingIcon == true
? Align(
alignment: Alignment.topLeft,
child: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(
MdiIcons.arrowLeft,
color: Colors.white,
)),
)
: Container(),
Align(
alignment: Alignment.topCenter,
child: Text(AppStrings.myAccount,
style: TextStyle(
fontSize: 15,
color: AppColors.white,
fontWeight: FontWeight.bold)),
),
Align(
alignment: Alignment.topRight,
child: GestureDetector(
onTap: () {},
child: Icon(
MdiIcons.pencilOutline,
color: AppColors.white,
)),
),
],
),
)
),
],
),
),
],
),
);
}
//ImageSource: Camera and Gallery.
_getImage(ImageSource imageSource) async
{
PickedFile? imageFile = await picker.getImage(source: imageSource);
//if user doesn't take any image, just return.
if (imageFile == null) return;
setState(
() {
//Rebuild UI with the selected image.
_image = File(imageFile.path);
},
);
}
Widget atmCard({String? image, String? cardName, double? height}) {
return GestureDetector(
onTap: () {
// Navigator.push(
// context, MaterialPageRoute(builder: (context) => Class()));
},
child: Card(
elevation: 2,
margin: EdgeInsets.only(bottom: 15, right: 5, left: 5),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 80,
// width: _width! * 0.90,
padding: EdgeInsets.only(
// top: 5,
left: 20,
// right: 20,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15), color: Colors.white),
child: Row(
children: [
Image.asset(
image.toString(),
height: height,
),
//Icon(Icons.atm,color: AppColors.hotelListDarkBlue,),
SizedBox(
width: 30,
),
Container(
width: MediaQuery.of(context).size.width * 0.62,
height: 50,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
cardName.toString(),
// "MasterCard",
style: TextStyle(
color: AppColors.hotelListDarkBlue,
fontSize: 12,
fontWeight: FontWeight.bold),
),
Text(
"4******12345678",
style: TextStyle(
fontSize: 14,
color: AppColors.hotelListLightGreyColor),
),
],
),
)
],
),
),
),
);
}
}
You can define your path arguments like this in autoRoute class :
AutoRoute(page: TrackAttendancePage, path: 'track-attendance/:id')
Then in your page pass them as argument using #PathParam
class TrackAttendancePage extends StatefulWidget {
final String registerId;
const TrackAttendancePage(#PathParam('id') this.registerId,{Key? key})
: super(key: key);
}
I'm trying to create a user interface for my app. I need to design like this:
But my recent UI looks like this:
In second screenshot I scrolled down because my gridview widget (which has 4 card widgets) doesn't come closer to other widgets. The other widgets are: a widget for titlebar, a card widget which has a graph and subgraph widgets. I put titlebar and graphs card widget inside a stack for showing them above. I put these two combined widgets inside a column with my gridview widget. And I wrap this column widget with a SingleChildScrollView widget because I want my page to be scrollable. So my questions is this: How I can put my gridview widget closer to my card widget as in the first image ?
Here is the code that I used for this UI:
import 'package:flutter/material.dart';
import 'package:flutter_circular_chart/flutter_circular_chart.dart';
import 'package:intl/intl.dart';
import 'baskana_rapor_icon_icons.dart';
// ignore: must_be_immutable
class MainPage extends StatelessWidget {
List<Widget> widgets = new List();
List<CircularSegmentEntry> dataList = _loadData();
int _totalCount;
Widget s1, s2, total;
final formatter = new NumberFormat("#,##");
#override
Widget build(BuildContext context) {
widgets.add(_buildBody(context));
return Scaffold(body: _buildBody(context));
}
Widget _buildBody(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
//mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
_buildTitleBar(context),
Positioned(bottom: 65, left: 35, child: _buildCard(context)),
],
),
_buildGridButtons(context),
],
),
);
},
);
}
Widget _buildGridButtons(BuildContext context) {
int itemWidth = 80;
int itemHeight = 40;
return SafeArea(
child: Column(
children: [
GridView.count(
crossAxisCount: 2,
childAspectRatio: (itemWidth / itemHeight),
shrinkWrap: true,
primary: true,
children: [
GestureDetector(
onTap: () {
Navigator.pushNamed(context, '/MahalleRapor');
},
child: Card(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(25),
),
),
child: Stack(
alignment: Alignment.center,
children: [
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(
BaskanaRaporIcon.mahalle_raporu,
color: Colors.redAccent,
size: 30,
),
Text(
'Mahalle Raporu',
style: TextStyle(
color: Colors.black87,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5,
)
],
),
Positioned(
bottom: 0,
right: 1,
left: 1,
child: Divider(
color: Colors.redAccent,
endIndent: 45,
indent: 50,
thickness: 3,
),
),
],
),
),
),
GestureDetector(
onTap: () {
Navigator.pushNamed(context, '/BirimRapor');
},
child: Card(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(25),
),
),
child: Stack(
alignment: Alignment.center,
children: [
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(
BaskanaRaporIcon.birim_raporu,
color: Colors.green[300],
size: 30,
),
Text(
'Birim Raporu',
style: TextStyle(
color: Colors.black87,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5,
)
],
),
Positioned(
bottom: 0,
right: 1,
left: 1,
child: Divider(
color: Colors.green[300],
endIndent: 45,
indent: 50,
thickness: 3,
),
),
],
),
),
),
GestureDetector(
onTap: () {
Navigator.pushNamed(context, '/GelirGider');
},
child: Card(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(25),
),
),
child: Stack(
alignment: Alignment.center,
children: [
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(
BaskanaRaporIcon.gelir_gider,
color: Colors.yellow[700],
size: 30,
),
Text(
'Gelir / Gider',
style: TextStyle(
color: Colors.black87,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5,
)
],
),
Positioned(
bottom: 0,
right: 1,
left: 1,
child: Divider(
color: Colors.yellow[700],
endIndent: 45,
indent: 50,
thickness: 3,
),
),
],
),
),
),
GestureDetector(
onTap: () {
Navigator.pushNamed(context, '/BaskanaMesaj');
},
child: Card(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(25),
),
),
child: Stack(
alignment: Alignment.center,
children: [
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(
BaskanaRaporIcon.baskana_msg,
color: Colors.blueAccent,
size: 30,
),
Text(
'Başkana Mesaj',
style: TextStyle(
color: Colors.black87,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5,
)
],
),
Positioned(
bottom: 0,
right: 1,
left: 1,
child: Divider(
color: Colors.blueAccent,
endIndent: 45,
indent: 50,
thickness: 3,
),
),
],
),
),
),
],
)
],
),
);
}
// ignore: todo
//TODO: Better implementation of UI
final double buttonHeight = 50;
Widget _buildCard(BuildContext context) {
return Center(
child: Container(
height: 500 + buttonHeight,
child: Stack(
alignment: Alignment.center,
overflow: Overflow.visible,
children: [
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
side: BorderSide(color: Colors.blueGrey, width: 0.5),
),
child: Container(
height: MediaQuery.of(context).size.height * .65,
width: MediaQuery.of(context).size.width * .80,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Genel Durum",
style: TextStyle(
fontSize: 20,
color: Colors.black,
letterSpacing: 0.3,
),
),
),
Divider(
color: Colors.grey,
thickness: 0.3,
endIndent: 10,
indent: 10,
),
_buildChart(dataList),
SizedBox(
height: 20,
),
_buildSubGraph(),
SizedBox(
height: 40,
),
],
),
),
),
Positioned(
//top: -buttonHeight /2,
bottom: 27,
child: _buildDetailsButton(context),
),
],
),
),
);
}
Widget _buildDetailsButton(BuildContext context) {
return ButtonTheme(
height: 50,
minWidth: 100,
child: RaisedButton(
onPressed: () {
Navigator.pushNamed(context, '/DetailPage');
},
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
child: Text("Detayları Gör"),
),
);
}
Row _buildSubGraph() {
String s1 = formatter.format((dataList[1].value / _totalCount) * 100);
String s0 = formatter.format((dataList[0].value / _totalCount) * 100);
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
//İşlemde
children: [
Text(
dataList[1].rankKey,
style: TextStyle(
fontSize: 18,
color: Colors.black87,
),
),
Container(
decoration: BoxDecoration(
color: dataList[1].color,
borderRadius: BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5),
bottomLeft: Radius.circular(5),
),
),
height: 50,
width: 150,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'${dataList[1].value.toInt()}',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
SizedBox(
width: 50,
),
Flexible(
child: Text(
'%' + s1,
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w300,
),
),
),
],
),
),
],
),
Column(
//Sonuçlanan
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
dataList[0].rankKey,
style: TextStyle(
fontSize: 18,
color: Colors.black87,
),
),
Container(
height: 50,
width: 150,
decoration: BoxDecoration(
color: dataList[0].color,
borderRadius: BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5),
bottomLeft: Radius.circular(5),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'${dataList[0].value.toInt()}',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
SizedBox(
width: 50,
),
Flexible(
child: Text(
'%' + s0,
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w300,
),
),
),
],
),
),
],
)
],
);
}
//Map<String, double> dataMap, List<Color> colorList,BuildContext context
Widget _buildChart(List<CircularSegmentEntry> dataList) {
_totalCount = _findTotalCount(dataList);
s1 = _createText("TOPLAMDA", 20, Colors.grey[600], false);
s1 = _createText("TALEP", 20, Colors.grey[600], false);
total = _createText('$_totalCount', 24, Colors.black87, true);
return Container(
child: AnimatedCircularChart(
size: Size(500, 250),
initialChartData: <CircularStackEntry>[
CircularStackEntry(
<CircularSegmentEntry>[
dataList[0],
dataList[1],
],
),
],
chartType: CircularChartType.Radial,
startAngle: -90,
holeRadius: 25,
holeLabel:
"TOPLAMDA \n\t\t\t\t\t\t\t $_totalCount \n\t\t\t TALEP", // $s1 \n\t\t\t\t\t\t\t $total \n\t\t\t $s2
),
);
}
Widget _buildTitleBar(BuildContext context) {
return Align(
alignment: Alignment.topCenter,
child: Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * .247,
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(25),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.assessment,
color: Colors.white,
),
Text(
"Genel Durum",
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.bold,
letterSpacing: 0.5,
),
),
],
),
),
],
),
);
}
}
Widget _createText(String msg, double size, Color color, bool isBold) {
return Text(
msg,
style: TextStyle(
color: color,
fontSize: size,
fontWeight: isBold ? FontWeight.bold : FontWeight.normal,
),
);
}
int _findTotalCount(List<CircularSegmentEntry> dataList) {
int result = 0;
for (int i = 0; i < dataList.length; i++) {
result += (dataList[i].value).toInt();
}
return result;
}
List<CircularSegmentEntry> _loadData() {
List<CircularSegmentEntry> dataList = [];
CircularSegmentEntry chartData1 =
new CircularSegmentEntry(150, Colors.greenAccent, rankKey: 'Sonuçlanan');
CircularSegmentEntry chartData2 =
new CircularSegmentEntry(150, Colors.blue, rankKey: 'İşlemde');
dataList.add(chartData1);
dataList.add(chartData2);
return dataList;
}
Extra question: If is there any thing that I can do for a more efficient design, can you tell me that ? Thanks!
Maybe this happening because of this piece of code in your Stack. This Container take your full screen size. that's why your GridView item build immediate after screen size. Try to remove this Container or reduce the height of it.
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
UPDATE:
You can try this. I have not tried this but Maybe this will help
Stack(
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: _buildTitleBar(context),
),
Align(
alignment: Alignment.topCenter,
child: Container(
margin: EdgeInsets.only(top: 100),
child: _buildCard(context),
),
)
],
)