I have a list of strings that are rendered in swipeable cards. What I want to achieve is that when the users finishes the cards, There is a button to "retry again" and the list of Strings is reset and retrieved again.
This is what i achieved so far:
class _ExampleHomePageState extends State<ExampleHomePage> with TickerProviderStateMixin {
List<String> truths = [
"Hello",
"Hello2",
"Hello3",
"Hello4",
"Hello5",
"Hello6",
"Hello7",
"Hello7",
"Hello7",
"Hello7",
];
#override
Widget build(BuildContext context) {
CardController controller;
return Scaffold(
backgroundColor: Colors.black45,
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.white,
title: Text(
'The truth game',
style: TextStyle(color: Colors.redAccent),
),
),
body: Container(
height: MediaQuery.of(context).size.height * 0.7,
child: TinderSwapCard(
orientation: AmassOrientation.BOTTOM,
totalNum: 6,
stackNum: 4,
swipeEdge: 4.0,
maxWidth: MediaQuery.of(context).size.width * 0.9,
maxHeight: MediaQuery.of(context).size.width * 0.9,
minWidth: MediaQuery.of(context).size.width * 0.8,
minHeight: MediaQuery.of(context).size.width * 0.8,
cardBuilder: (context, index) => Card(
child: Center(
child: Text(
'${truths[index]}',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
)),
),
cardController: controller = CardController(),
swipeUpdateCallback: (DragUpdateDetails details, Alignment align) {
if (align.x < 0) {
} else if (align.x > 0) {
return {
};
}
},
swipeCompleteCallback: (CardSwipeOrientation orientaion, int index) {
GestureDetector(
child: Text('try me again'),
onTap: (){
},
);
},
)),
bottomNavigationBar: CurvedNavigationBar(
color: Colors.white,
backgroundColor: Colors.transparent,
buttonBackgroundColor: Colors.white,
height: 70.0,
items: <Widget>[
Icon(
Icons.home,
size: 30.0,
color: Colors.redAccent,
),
Icon(
Icons.chat_bubble,
size: 30.0,
color: Colors.redAccent,
),
Icon(
FontAwesomeIcons.heart,
size: 30.0,
color: Colors.redAccent,
),
],
),
);
}
}
I tried setting the SetState(){} method, but its not reseting the list.
you can reset your whole widget by :
void _reset() {
Navigator.pushReplacement(
context,
PageRouteBuilder(
transitionDuration: Duration.zero,
pageBuilder: (_, __, ___) => MyWidget(),
),
);
}
and call it when you press your resetbutton
swipeCompleteCallback: (CardSwipeOrientation orientaion, int index) {
GestureDetector(
child: Text('try me again'),
onTap: (){
// add this code inside try me again..,
truths.clear();
setState((){});
},
);
},
Related
I have this menu on the floating button , but I could not align it correctly,
I want it to show directly above the floating button, this is how it looks in red box:
I want the pop up menu to be like this in red box , I tried to change offset number but did not work it just moves left and right
please help me find a solution I'm really struggling, I provided the code below please check it out
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: myPopMenu(context),
backgroundColor: Colors.white,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomNav(
onChange: (a) {
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(
builder: (c) => AppPage(initialPage: a,)),
(route) => false);
},
),
);
}
Widget myPopMenu(BuildContext context) {
return Theme(
data: Theme.of(context).copyWith(
cardColor: Colors.white60,
),
child: PopupMenuButton(
offset: const Offset(-90, 100),
icon: Image.asset('assets/logo.png', fit: BoxFit.cover, height: 40),
onCanceled: () {
setState(() {
isClicked = false;
});
},
onSelected: (value) {
setState(() {
isClicked = false;
});
print('pop up clicked');
if (value == 0) {
alertRate();
} else if (value == 1){
alertServices();
}else if (value == 2) {
alertAdditonalInfo();
}else if (value == 3){
alertReport();
}
},
itemBuilder: (context) {
setState(() {
isClicked = true;
});
return [
PopupMenuItem(
child: Center(
child: Text(
'Rate & Review',
style: TextStyle(color: Colors.black),
),
),
value: 0,
),
PopupMenuItem(
height: 4,
child: Container(
height: 2,
color: Colors.black,
),
),
PopupMenuItem(
child: Center(
child: Text(
'Edit Available Services',
style: TextStyle(color: Colors.black),
),
),
value: 1,
),
PopupMenuItem(
height: 4,
child: Container(
height: 2,
color: Colors.black,
),
),
PopupMenuItem(
child: Center(
child: Text(
'Edit Social Accounts',
style: TextStyle(color: Colors.black),
),
),
value: 2,
),
PopupMenuItem(
height: 4,
child: Container(
height: 2,
color: Colors.black,
),
),
PopupMenuItem(
child: Center(
child: Text(
'Report an Issue',
style: TextStyle(color: Colors.black),
),
),
value: 3,
),
];
}),
);
}
You can use stack and positioned widget to place it at specific height above bottom nav bar like this
class Sample extends StatelessWidget {
const Sample({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
alignment: Alignment.center,
children: [
Positioned(
bottom: 30,
child: Container(
color: Colors.grey,
width: 50,
height: 30,
child: Text('Hello'),
),
)
],
,
);
}
}
https://github.com/flutter-devs/flutter_folding_cell_demo/blob/master/lib/demo_screen.dart
I'm trying to follow the code in the link above.
But in the SimpleFoldingCell part, an error named 'The class 'SimpleFoldingCell' doesn't have a default constructor.' occurs.
Could
Is there a way to resolve this error in Dart?
class Notific extends StatefulWidget{
#override
_State createState() => _State();
}
class _State extends State<Notific>{
late List<TechnologyModel> _technologyList;
#override
void initState() {
super.initState();
_technologyList = [
TechnologyModel(title: "Application Development",),
TechnologyModel(title: "Research & Development",),
TechnologyModel(title: "Big Data & Analytics",),
TechnologyModel(title: "Support Services",),
TechnologyModel(title: "QA & Software Testing",),
];
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.pink[200],
title: Text("Folding Cell Demo",
style: TextStyle(color: Colors.white),),
),
body: Container(
child: ListView.builder(
itemCount: _technologyList.length,
itemBuilder: (context, index) {
return SimpleFoldingCell(
frontWidget: _buildFrontWidget(index),
innerTopWidget: _buildInnerWidget(index),
innerBottomWidget: _buildInnerBottomWidget(),
cellSize: Size(MediaQuery.of(context).size.width, 125),
padding: EdgeInsets.all(15),
animationDuration: Duration(milliseconds: 200),
borderRadius: 10,
onOpen: () => print('$index cell opened'),
onClose: () => print('$index cell closed'),
);
},
),
),
);
}
Widget _buildFrontWidget(int index) {
return Builder(
builder: (BuildContext context) {
return Container(
color: Colors.cyan[100],
alignment: Alignment.bottomCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Aeologic Technology",
style: TextStyle(
fontSize:20.0,
color: Colors.black,
),
),
SizedBox(height: 10,),
FlatButton(
onPressed: () {
final foldingCellState = context
.findAncestorStateOfType<SimpleFoldingCellState>();
foldingCellState?.toggleFold();
},
child: Text(
"OPEN",
),
textColor: Colors.white,
color: Colors.indigoAccent[100],
splashColor: Colors.white.withOpacity(0.5),
),
],
),
);
},
);
}
Widget _buildInnerBottomWidget() {
return Builder(
builder: (context) {
return Container(
color: Colors.blueGrey[50],
alignment: Alignment.bottomCenter,
child: Padding(
padding: EdgeInsets.only(bottom: 10),
child: FlatButton(
onPressed: () {
final foldingCellState = context
.findAncestorStateOfType<SimpleFoldingCellState>();
foldingCellState?.toggleFold();
},
child: Text(
"Close",
),
textColor: Colors.white,
color: Colors.redAccent[100],
splashColor: Colors.white.withOpacity(0.5),
),
),
);
}
);
}
Widget _buildInnerWidget(int index) {
return Builder(
builder: (context) {
return Container(
color: Colors.pink[100],
padding: EdgeInsets.only(top: 10),
child: Align(
alignment: Alignment.center,
child: Text(
_technologyList[index].title,
style: TextStyle(
fontSize:20.0,
color: Colors.black,
),
),
),
);
},
);
}
}
class TechnologyModel {
String title;
TechnologyModel({
required this.title,
});
}
For some reason they've created only a named constructor.
return SimpleFoldingCell.create(
frontWidget: _buildFrontWidget(index),
innerWidget: _buildInnerWidget(index),
// innerTopWidget: _buildInnerWidget(index),
// innerBottomWidget: _buildInnerBottomWidget(),
cellSize: Size(MediaQuery.of(context).size.width, 125),
padding: EdgeInsets.all(15),
animationDuration: Duration(milliseconds: 200),
borderRadius: 10,
onOpen: () => print('$index cell opened'),
onClose: () => print('$index cell closed'),
);
It looks like the demo you're looking at is a bit outdated, since some of those properties don't exist anymore (see commented code).
I'm using Provider in my flutter app. I was able to change one widget with another one, without using set state. That was great!
My feature consist that when I tap in the button 'Añadir al carrito', a number over the shopping car change, increasing one by one.
This is the part of my code that I put in the button, that is inside the body of my scaffold using the provider.of:
final _numCompras = Provider.of<MyShoppingCart>(context);
return Padding(
padding: const EdgeInsets.only(top: 15.0),
child: GestureDetector(
onTap: () {
_numCompras.numCompras = _numCompras.numCompras + 1;
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: const Text('Producto Añadido'),
duration: const Duration(seconds: 1),
action: SnackBarAction(
label: '',
onPressed: () {
},
),
));
},
child: Container(
height: 80,
width: double.infinity,
decoration: BoxDecoration(
color: Constants.kColorRojo,
borderRadius: BorderRadius.circular(60),
border: Border.all(width: 1, color: Colors.black),
),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Añadir al Carrito',
style: TextStyle(
color: Colors.white,
fontFamily: 'Poppins',
fontSize: 20,
),
),
SizedBox(
width: 15,
),
Icon(
Icons.shopping_cart_outlined,
color: Colors.white,
size: 30,
),
],
),
),
),
),
);
}
This is my class using ChangeNotifier
int _numCompras = 0;
get numCompras => _numCompras;
set numCompras(int newValue) {
_numCompras = newValue;
notifyListeners();
}
}
And in my main.dart I`m putting the ChangeNotifierProvider, because I thing that one contain all of the rest widgets.
class JuniorsApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider<MyShoppingCart>(
create: (context) => MyShoppingCart(),
//builder: ,
)
],
child: MaterialApp(
theme: ThemeData.light().copyWith(
primaryColor: Color(0xFFd51921),
scaffoldBackgroundColor: Color(0xFFf2f2f2),
),
home: PageStart(),
initialRoute: PageStart().ID_PageStart,
routes: {
page_IniciarSesion().ID_PageIniciarSesion: (context) =>
page_IniciarSesion(),
PageStart().ID_PageStart: (context) => PageStart(),
RegistroNombrePage().ID_PageRegistroNombre: (context) =>
RegistroNombrePage()
},
debugShowCheckedModeBanner: false,
),
);
}
}
And finally the code of my appBar that is the widget that I`m changing:
Widget build(BuildContext context) {
bool _hasBackButton = hasBackArrow ?? true;
final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;
return Selector<MyShoppingCart,int>(
selector: (_, model) => model.numCompras,
builder: (context, numCompras, _) {
return SafeArea(
child: Material(
elevation: 15,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (_hasBackButton)
RoundedIconButton(
iconData: Icons.arrow_back_ios,
press: () {
Navigator.pop(context, MaterialPageRoute(
builder: (context) {
return Selector(builder: (context, numCompras, _){}, selector: (_, model) => model.numCompras);
},
)
);
}
),
Text(
this.title == null ? 'Junior \'s Tacos' : this.title,
style: Constants.kFuenteAppBar,
),
this.hasCart
? _widgetShoppingCar(context, height, width, numCompras)
: Spacer() ,
],
),
),
),
);
},
);
}
Widget _widgetShoppingCar(context, height, width, _numCompras) {
return Stack(
children: [
RoundedIconButton(
iconData: Icons.shopping_cart_outlined,
press: () {
_viewShop = !_viewShop;
this.changeAppBarShop(_viewShop);
/*Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CartPage(),
),
);*/
},
),
Positioned(
bottom: height * 0.04,
left: width * 0.09,
child: Container(
width: width * 0.05,
height: height * 0.025,
decoration: BoxDecoration(
color: Colors.red[500],
border: Border.all(
color: Colors.red[500],
),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Center(
child: Text(
'${_numCompras}',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
)),
),
)
],
);
}
The thing is that it works fine, but when I do Navigator.pop from the appBar. The count over the shopping car come back to zero.
Here is how its working at the moment
Could anyone give a me a tip about this?
thanks!
Well, if anyone have this kind of problem. The issue for me was that I have two ChangeNotifierProvider. One in my main.dart and the other one in my widget that contain the button. I remove the last one and now its working.
The issue is that progress icons and continue button are hidden in my stepper (cancel button is visible). So when i click on the place where "continue" button should exists (next to Cancel button) the "continue" event is happening and its correct.
The strange thing is that when i use the same code in a new test project, i can see both buttons and icons. Maybe its related to my sidebar but i am not sure.
import 'package:flutter/material.dart';
import 'package:taamin/bloc/navigation_bloc/navigation_bloc.dart';
class MyOrdersPage extends StatefulWidget with NavigationStates{
#override
_MyOrdersPageState createState() => _MyOrdersPageState();
}
class _MyOrdersPageState extends State<MyOrdersPage> {
List<Step> steps = [
Step(
title: const Text('New Account'),
isActive: true,
state: StepState.complete,
content: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: 'Email Address'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
),
],
),
),
Step(
title: const Text('Address'),
isActive: true,
state: StepState.editing,
content: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: 'Home Address'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Postcode'),
),
],
),
),
Step(
state: StepState.error,
title: const Text('Avatar'),
subtitle: const Text("Error!"),
content: Column(
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.red,
)
],
),
),
];
StepperType stepperType = StepperType.vertical;
int currentStep = 0;
bool complete = false;
next() {
currentStep + 1 != steps.length
? goTo(currentStep + 1)
: setState(() => complete = true);
}
cancel() {
if (currentStep > 0) {
goTo(currentStep - 1);
}
}
goTo(int step) {
setState(() => currentStep = step);
}
switchStepType() {
setState(() => stepperType == StepperType.horizontal
? stepperType = StepperType.vertical
: stepperType = StepperType.horizontal);
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Assurance Véhicule'),
),
body: Column(children: <Widget>[
complete ? Expanded(
child: Center(
child: AlertDialog(
title: new Text("Profile Created"),
content: new Text(
"Tada!",
),
actions: <Widget>[
new FlatButton(
child: new Text("Close"),
onPressed: () {
setState(() => complete = false);
},
),
],
),
),
)
: Expanded(
child: Stepper(
steps: steps,
type: stepperType,
currentStep: currentStep,
onStepContinue: next,
onStepTapped: (step) => goTo(step),
onStepCancel: cancel,
),
),
]),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.list),
onPressed: switchStepType,
),
);
}
}
and here is the code of my sidebar menu:
import 'dart:async';
import 'dart:io';
import 'dart:typed_data';
import 'package:rxdart/rxdart.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:taamin/bloc/navigation_bloc/navigation_bloc.dart';
import 'package:taamin/sidebar/menu_item.dart';
class SideBar extends StatefulWidget {
#override
_SideBarState createState() => _SideBarState();
}
class _SideBarState extends State<SideBar>
with SingleTickerProviderStateMixin<SideBar> {
AnimationController _animationController;
StreamController<bool> isSidebarOpenedStreamController;
Stream<bool> isSidebarOpenedStream;
StreamSink<bool> isSidebarOpenedSink;
final _animationDuration = const Duration(milliseconds: 500);
#override
void initState() {
super.initState();
_animationController =
AnimationController(vsync: this, duration: _animationDuration);
isSidebarOpenedStreamController = PublishSubject<bool>();
isSidebarOpenedStream = isSidebarOpenedStreamController.stream;
isSidebarOpenedSink = isSidebarOpenedStreamController.sink;
}
#override
void dispose() {
_animationController.dispose();
isSidebarOpenedStreamController.close();
isSidebarOpenedSink.close();
super.dispose();
}
void onIconPressed() {
final animationStatus = _animationController.status;
final isAnimationCompleted = animationStatus == AnimationStatus.completed;
//completed means sidebar is open
if (isAnimationCompleted) {
isSidebarOpenedSink.add(false);
_animationController.reverse();
} else {
isSidebarOpenedSink.add(true);
_animationController.forward();
}
}
#override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
return StreamBuilder<bool>(
initialData: false,
stream: isSidebarOpenedStream,
builder: (context, isSideBarOpenedAsync) {
return AnimatedPositioned(
duration: _animationDuration,
top: 0,
bottom: 0,
left: isSideBarOpenedAsync.data ? 0 : -screenWidth,
right: isSideBarOpenedAsync.data ? 0 : screenWidth - 30,
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 20),
color: const Color(0xFF262AAA),
child: Column(
children: <Widget>[
SizedBox(
height: 100,
),
ListTile(
title: Text(
"Yassine",
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.w800),
),
subtitle: Text(
"firstname.name#gmail.com",
style: TextStyle(
color: Color(0xFF1BB5FD),
fontSize: 15,
),
),
leading: CircleAvatar(
child: Icon(
Icons.perm_identity,
color: Colors.white,
),
radius: 40,
),
),
Divider(
height: 64,
thickness: 0.5,
color: Colors.white.withOpacity(0.3),
indent: 32,
endIndent: 32,
),
MenuItem(
icon: Icons.home,
title: "Home",
onTap: () {
onIconPressed();
BlocProvider.of<NavigationBloc>(context).add(NavigationEvents.HomePageClickedEvent);
},
),
MenuItem(
icon: Icons.person,
title: "My Accounts",
onTap: () {
onIconPressed();
BlocProvider.of<NavigationBloc>(context).add(NavigationEvents.MyAccountClickedEvent);
},
),
MenuItem(
icon: Icons.directions_car,
title: "Assurance Véhicule",
onTap: () {
onIconPressed();
BlocProvider.of<NavigationBloc>(context).add(NavigationEvents.MyOrdersClickedEvent);
},
),
MenuItem(
icon: Icons.card_giftcard,
title: "Wishlist",
),
Divider(
height: 64,
thickness: 0.5,
color: Colors.white.withOpacity(0.3),
indent: 32,
endIndent: 32,
),
MenuItem(
icon: Icons.settings,
title: "Settings",
),
MenuItem(
icon: Icons.exit_to_app,
title: "Logout",
onTap: () {
onIconPressed();
exit(0);
}
),
],
),
),
),
Align(
alignment: Alignment(0, -0.9),
child: GestureDetector(
onTap: () {
onIconPressed();
},
child: ClipPath(
clipper: CustomMenuClipper(),
child: Container(
width: 35,
height: 110,
color: Color(0xFF262AAA),
alignment: Alignment.centerLeft,
child: AnimatedIcon(
progress: _animationController.view,
icon: AnimatedIcons.menu_close,
color: Color(0xFF1BB5FD),
size: 25,
),
),
),
),
)
],
),
);
},
);
}
}
class CustomMenuClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Paint paint = Paint();
paint.color = Colors.white;
final width = size.width;
final height = size.height;
Path path = Path();
path.moveTo(0, 0);
path.quadraticBezierTo(0, 8, 10, 16);
path.quadraticBezierTo(width - 1, height / 2 - 20, width, height / 2);
path.quadraticBezierTo(width + 1, height / 2 + 20, 10, height - 16);
path.quadraticBezierTo(0, height - 8, 0, height);
path.close();
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
add controlsBuilder inside stepper
controlsBuilder: (BuildContext context,
{VoidCallback onStepContinue, VoidCallback onStepCancel}) {
return Row(
children: <Widget>[
FlatButton(
onPressed: onStepContinue,
child: const Text('Continue',
style: TextStyle(color: Colors.white)),
color: Colors.redAccent,
),
new Padding(
padding: new EdgeInsets.all(10),
),
FlatButton(
onPressed: onStepCancel,
child: const Text(
'Cancel',
style: TextStyle(color: Colors.white),
),
color: Colors.black,
),
],
);
},
I'm having a problem right now in my bottom navigation in flutter.
I have four navigation "Community, Feeds, Activity, Profile".
In my "Feeds" navigation I have a button named "View Profile" everytime I click that button it directs me to a new screen using
"Navigator.push(context, MaterialPageRoute())"
and I notice it auto generates a "<-" or "back arrow" icon on the appbar.
The problem is everytime I click that "back arrow", it redirects me to the first option on my navigation bar.
Not on the "Feeds" navigation.
Any tips how to fix this?
Here is my bottom navigation code:
_getPage(int page) {
switch (page) {
case 0:
return NewsFeed();
case 1:
return OrgAndNews();
case 2:
return MyActivity();
case 3:
return Profile();
}
}
int currentPage = 0;
void _onBottomNavBarTab(int index) {
setState(() {
currentPage = index;
});
}
return Scaffold(
body: Container(
child: _getPage(currentPage),
),
bottomNavigationBar: Container(
height: _height * .09,
child: BottomNavigationBar(
backgroundColor: Color(0xFFFFFFFF),
fixedColor: Color(0xFF121A21),
unselectedItemColor: Color(0xFF121A21),
currentIndex: currentPage,
onTap: _onBottomNavBarTab,
items: [
BottomNavigationBarItem(
icon: Icon(FontAwesomeIcons.users),
title: Padding(
padding: const EdgeInsets.only(top: 3.0),
child: Text('Community', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(35),
fontWeight: FontWeight.w800),
),
),
),
BottomNavigationBarItem(
icon: Icon(FontAwesomeIcons.newspaper),
title: Padding(
padding: const EdgeInsets.only(top: 3.0),
child: Center(
child: Text('Feeds', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(35),
fontWeight: FontWeight.w800),),
),
),
),
BottomNavigationBarItem(
icon: Icon(FontAwesomeIcons.listUl),
title: Padding(
padding: const EdgeInsets.only(top: 3.0),
child: Text('My Activity', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(35),
fontWeight: FontWeight.w800),),
),
),
BottomNavigationBarItem(
icon: Icon(FontAwesomeIcons.userAlt),
title: Padding(
padding: const EdgeInsets.only(top: 3.0),
child: Text('Profile', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(35),
fontWeight: FontWeight.w800),),
),
),
],
),
),
);
My code for the page when you click the "View Profile":
class OrgProfile extends StatefulWidget {
OrgProfile(this.orgName) : super();
final String orgName;
#override
_OrgProfileState createState() => _OrgProfileState();
}
class _OrgProfileState extends State<OrgProfile> {
#override
final db = Firestore.instance;
Container buildItem(DocumentSnapshot doc) {
return Container(
child: Column(
children: <Widget>[
Center(
child: Padding(
padding: const EdgeInsets.only(top: 20.0),
child: CircleAvatar(
radius: 70,
),
),
),
Text(
'${doc.data['Email']}',
style: TextStyle(color: Colors.black),
)
],
),
);
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.orgName),
),
body: StreamBuilder<QuerySnapshot>(
stream: db
.collection('USERS')
.where('Name of Organization', isEqualTo: widget.orgName)
.snapshots(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Column(
children: snapshot.data.documents
.map((doc) => buildItem(doc))
.toList());
} else {
return SizedBox();
}
}),
);
}
}
My code when i click the "View Profile" button:
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => new
OrgProfile(
doc.data['Name of Organization'])));
},
My feeds UI:
My View Profile UI:
Have you used MaterialPage Route With Builder Like This?
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => new MyToDoThunder(),
),
)
Homepage Code :-
class HomePage extends StatefulWidget {
#override
State<StatefulWidget> createState() {
//
return new HomePageState();
}
}
class HomePageState extends State<HomePage> {
var db = DatabaseHelper();
int _selectedIndex = 0;
List<bool> textColorChange = [true, false, false, false];
final _widgetOptions = [
StatusPageRedux(),
RequestPage(),
NotificationPage(),
DashboardPage(),
];
_bottomNavigationView() {
return new Theme(
isMaterialAppTheme: true,
data: Theme.of(context)
.copyWith(canvasColor: Theme.of(context).primaryColor),
child: new BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: _onItemTapped,
currentIndex: _selectedIndex,
fixedColor: Colors.white,
items: [
new BottomNavigationBarItem(
activeIcon: ThunderSvgIcons(
path: 'assets/icons/Status.svg', height: 20.0, color: Colors.white),
icon: ThunderSvgIcons(
path: 'assets/icons/Status.svg', height: 20.0, color: Colors.white30),
title: new Text(
'Status',
style: TextStyle(
color: textColorChange[0] ? Colors.white : Colors.white30),
),
),
new BottomNavigationBarItem(
title: new Text(
'Requests',
style: TextStyle(
color: textColorChange[1] ? Colors.white : Colors.white30),
),
activeIcon: ThunderSvgIcons(
path: 'assets/icons/Requests.svg', height: 20.0, color: Colors.white),
icon: ThunderSvgIcons(
path: 'assets/icons/Requests.svg',
height: 20.0,
color: Colors.white30),
),
new BottomNavigationBarItem(
activeIcon: ThunderSvgIcons(
path: 'assets/icons/Notifications.svg',
height: 20.0,
color: Colors.white),
icon: ThunderSvgIcons(
path: 'assets/icons/Notifications.svg',
height: 20.0,
color: Colors.white30),
title: new Text(
'Notifications',
style: TextStyle(
color: textColorChange[2] ? Colors.white : Colors.white30),
),
),
new BottomNavigationBarItem(
activeIcon: ThunderSvgIcons(
path: 'assets/icons/dashboard.svg',
height: 20.0,
color: Colors.white),
icon: ThunderSvgIcons(
path: 'assets/icons/dashboard.svg',
height: 20.0,
color: Colors.white30),
title: new Text(
'Dashboard',
style: TextStyle(
color: textColorChange[3] ? Colors.white : Colors.white30),
),
),
],
),
);
}
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(child: _widgetOptions.elementAt(_selectedIndex)),
bottomNavigationBar: _bottomNavigationView(),
);
}
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
for (int i = 0; i < textColorChange.length; i++) {
if (index == i) {
textColorChange[i] = true;
} else {
textColorChange[i] = false;
}
}
});
}
}
You will have to add your way back to the stack.
Try the below appbar in you 'tuloung duloung' title page, it should do the trick.
Note if your homescreen has tabs its advised to pass the index of the page you want to reach on exiting 'tuloung duloung'.
Let me know if it helps.
AppBar(
backgroundColor: Colors.transparent,
centerTitle: false,
brightness: Brightness.dark,
title: Container(
width: 150,
child: Row(
children:[
IconButton(icon:Icons.back_arrow,
onpressed:() =>
Navigator.pushReplacementNamed(context, '/Your Home_Screen');
),
Text('tuloung duloung',
style: TextStyle(
fontWeight: FontWeight.w400,
color: theme.primaryColor,
)),
]
),
),
automaticallyImplyLeading: false,
iconTheme: IconThemeData(
color: theme.primaryColor,
),
actions:[ Container(
width: 150,
child: FlatButton.icon(
label: Text('Done'),
icon: Icon(Icons.check_circle),
onPressed: () => {
setState(() {
takingsnap = true;
_captureImage();
})
}),
),
]
),