So i'm emulating an old app I have where the UI looks like this
Currently i'm focused on creating the UI layout for the purple side bar, I did that by creating a Container with a purple background. Within the container I created a column with multiple children and just used an empty SizedBox to create distance between one widget from another.
import 'package:flutter/material.dart';
class SignInPage extends StatelessWidget {
const SignInPage({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
// appBar: AppBar(
// title: Text('Sample Text'),
// elevation: 5.0,
// ),
body: _buildContent(),
);
}
Widget _buildContent() {
// private method
return Container(
color: Colors.deepPurpleAccent,
padding: EdgeInsets.all(16.0),
child: Column(
// crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.orange,
child: SizedBox(
height: 100.0,
width: 80.0,
),
),
SizedBox(
height: 140.0,
),
Container(
color: Colors.red,
child: SizedBox(
height: 50.0,
width: 80.0,
),
),
SizedBox(
height: 8.0,
),
Container(
color: Colors.purple,
child: SizedBox(
height: 50.0,
width: 80.0,
),
),
],
),
);
}
}
I'm quite new to flutter so i'm wondering if there's a better way to structure my layout of the side bar? Also to think in the future, since the name "BagTrack" Is on the same level as "Analytic Overview" Should that just be one giant row"?
Actual answer
Method 1
#Mahfuzur Rahman answer is good, but to actually answer your question about other ways. Flex widgets (Column and Row extend the Flex widget), have both mainAxisAlignment and crossAxisAlignment, they can be used to align them more easily between different devices/screens sizes.
So maybe grouping your red and purple boxes in a Column with mainAxisSize set to MainAxisSize.min, and aligning the surrounding column with a specific size.
https://api.flutter.dev/flutter/widgets/Column-class.html
Method 2
Another way, if you would like some widget to occupy some percentage amount of space from it's parent, I suggest you look into Expanded widget, Flexible widget.
Method 3
Or even FractionallySizedBox could be a good widget for you, but then I would also look at this LayoutBuilder widget to solve the potential Unbounded Height/Width exception.
Second smaller question
It's entirely up to you to decide about your second question concerning the giant row. I wouldn't do it though. Probably would use a const SizedBox or const EdgeInsets (for Padding) and keep them at the same height this way.
Just complementing Flutter knowledge
PS: Since you are new to Flutter. As a suggestion for future performance: avoid the Container widget as much as you know, there are a lot of simpler widgets like SizedBox, ColoredBox, DecoratedBox and Padding that you can use in its place that could be marked as const sometimes and be less expensive.
For understanding final and const:
final is a variable that cannot be reassigned by accident inside your code. When you instantiate it you give it a value and that's it. (Using late changes that a bit but not much);
const is a variable assigned by the compiler, if you are familiar with C it's like #define but there is a little difference, every time you say const EdgeInsets.all(8) for example, the compiler will detect that and use the same variable, so you don't have to remember a specific constant variable name.
Yes there is. But using SizedBox also wont hurt.
I usually Prefer ListTile for each element in the drawer.
ListTile(
leading: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {},
child: Container(
width: 48,
height: 48,
padding: const EdgeInsets.symmetric(vertical: 4.0),
alignment: Alignment.center,
child: const CircleAvatar(),
),
),
title: const Text('title'),
dense: false,
)
After doing flutter upgrade yesterday the content of ListTile leading (especially the height) does not match parent anymore.
I have a overflow in height now. Width is working as expected.
As you can see in the picture there is still space below the leading widget.
Does anyone know how to fix this?
Or is there a way to downgrade the flutter version?
Widget _listTile(){
return ListTile(
contentPadding: EdgeInsets.fromLTRB(3.0, 1.0, 0.0, 1.0),
dense: true,
leading: Column(
children: <Widget>[
_leadingButton(),
_leadingProgress
],
),
title: _textSubtitle(subtitle),
subtitle: _textSubtitle(subtitle),
);
}
I believe the change that has caused this is [this one][1]: https://github.com/flutter/flutter/commit/0e2eeb5a485aaccdab7007ad9b90fd8120e77983#diff-53f33273ae4e7462729c5f4b7394428b. If you read the code, it says it was doing an update to adhere to the material spec which means a constraint on the size of the widget, so there's a very good chance it won't change back to how it was. How you were using it was technically against the material spec.
But rather than trying to downgrade flutter, you could simply create your own widget that does the same thing - you don't need to use a ListTile.
Something like this would probably do:
class MyListTile extends StatelessWidget {
final Widget leading;
final Widget title;
final Widget subtitle;
final EdgeInsets padding;
MyListTile({#required this.leading, #required this.title, #required this.subtitle, this.padding});
#override
void build(BuildContext context) {
return Padding(
padding: padding ?? EdgeInsets.zero,
child: Row(
children: [
leading,
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
title,
subtitle,
],
),
),
],
),
);
}
}
Full disclosure though - I haven't run that code or even put it in an IDE so it may have issues, but that should illustrate the basics of what you're trying to do there. You'd probably want to wrap things in padding (most likely at least the leading widget) as needed to get the spacing you currently have.
When popping a screen navigating to other one by clicking on the showBottomSheet, this error is thrown through the following code . I cant get why this is occurring.
class _CheckoutButtonState extends State<_CheckoutButton> {
final GlobalKey<ScaffoldState> _globalKey = GlobalKey();
final DateTime deliveryTime = DateTime.now().add(Duration(minutes: 30));
final double deliveryPrice = 5.00;
#override
Widget build(BuildContext context) {
SubscriptionService subscriptionService =
Provider.of<SubscriptionService>(context);
CheckoutService checkoutService = Provider.of<CheckoutService>(context);
return Container(
height: 48.0,
width: MediaQuery.of(context).size.width * 0.75,
child: StreamBuilder(
stream: subscriptionService.subscription$,
builder: (_, AsyncSnapshot<Subscription> snapshot) {
if (!snapshot.hasData) {
return Text("CHECKOUT");
}
final Subscription subscription = snapshot.data;
final List<Order> orders = subscription.orders;
final Package package = subscription.package;
num discount = _getDiscount(package);
num price = _totalPriceOf(orders, discount);
return StreamBuilder<bool>(
stream: checkoutService.loading$,
initialData: false,
builder: (context, snapshot) {
bool loading = snapshot.data;
return ExtendedFloatingActionButton(
loading: loading,
disabled: loading,
action: () async {
checkoutService.setLoadingStatus(true);
final subscription =
await Provider.of<SubscriptionService>(context)
.subscription$
.first;
try {
await CloudFunctions.instance.call(
functionName: 'createSubscription',
parameters: subscription.toJSON);
final bottomSheet =
_globalKey.currentState.showBottomSheet(
(context) {
return Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Theme.of(context).scaffoldBackgroundColor,
Theme.of(context).primaryColor,
Theme.of(context).primaryColor,
],
stops: [-1.0, 0.5, 1.0],
),
),
child: Column(
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(bottom: 16.0),
child: Text(
"Thank you for your order",
textAlign: TextAlign.center,
style: Theme.of(context)
.textTheme
.display1,
),
),
SvgPicture.asset(
'assets/images/thumb.svg',
height: 120.0,
width: 100.0,
)
// CircleAvatar(
// radius: 40.0,
// backgroundColor: Colors.transparent,
// child: Icon(
// Icons.check,
// color: Theme.of(context)
// .textTheme
// .display1
// .color,
// size: 80.0,
// ),
// ),
],
),
),
Container(
width:
MediaQuery.of(context).size.width * 0.9,
height: 72.0,
padding: EdgeInsets.only(bottom: 24),
child: ExtendedFloatingActionButton(
text: "ORDER DETAILS",
action: () {
Navigator.of(context).pop();
},
),
),
],
),
);
},
);
bottomSheet.closed.then((v) {
Navigator.of(context)
.popUntil((r) => r.settings.isInitialRoute);
});
} catch (e) {
print(e);
final snackBar =
SnackBar(content: Text('Something went wrong!'));
Scaffold.of(context).showSnackBar(snackBar);
}
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"CHECKOUT ",
style: Theme.of(context)
.textTheme
.display4
.copyWith(color: Colors.white),
),
Text(
"EGP " +
(price + (orders.length * deliveryPrice))
.toStringAsFixed(2),
style: Theme.of(context)
.textTheme
.display4
.copyWith(color: Theme.of(context).primaryColor),
),
],
),
);
});
},
),
);
}
num _totalPriceOf(List<Order> orders, num discount) {
num price = 0;
orders.forEach((Order order) {
List<Product> products = order.products;
products.forEach((Product product) {
price = price + product.price;
});
});
num priceAfterDiscount = price * (1 - (discount / 100));
return priceAfterDiscount;
}
num _getDiscount(Package package) {
if (package == null) {
return 0;
} else {
return package.discount;
}
}
}
Error :
>══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (24830): The following assertion was thrown building Navigator-[GlobalObjectKey<NavigatorState>
I/flutter (24830): _WidgetsAppState#90d1f](dirty, state: NavigatorState#6b2b6(tickers: tracking 1 ticker)):
I/flutter (24830): 'package:flutter/src/widgets/navigator.dart': Failed assertion: line 1995 pos 12: '!_debugLocked':
I/flutter (24830): is not true.
I/flutter (24830): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter (24830): more information in this error message to help you determine and fix the underlying cause.
I/flutter (24830): In either case, please report this assertion by filing a bug on GitHub:
I/flutter (24830): https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter (24830): When the exception was thrown, this was the stack:
Instead of giving you a direct answer, I'm going to walk you through how I thought about this when I saw the question, in the hope that it'll help you in the future.
Let's take a look at the assertion. It says Failed assertion: line 1995 pos 12: '!_debugLocked': I/flutter (24830): is not true.. Hmm, interesting. Let's take a look at that line of code.
assert(!_debugLocked);
Well, that doesn't give me much more information, let's look at the variable.
bool _debugLocked = false; // used to prevent re-entrant calls to push, pop, and friends
That's better. It's there to prevent re-entrant calls to push, pop, etc (by that it means that it doesn't want you calling 'push', 'pop', etc from within a call to 'push', 'pop'). So let's trace that back to your code.
This seems like the likely culprit:
bottomSheet.closed.then((v) {
Navigator.of(context)
.popUntil((r) => r.settings.isInitialRoute);
});
I'm going to skip a step here and use deductive reasoning instead - I'm betting that the closed future is finished during a pop. Go ahead and confirm that by reading the code if you feel like it.
So, if the issue is that we're calling pop from within a pop function, we need to figure out a way to defer the call to pop until after the pop has completed.
This becomes quite simple - there's two ways to do this. The simple way is to just use a delayed future with zero delay, which will have dart schedule the call as soon as possible once the current call stack returns to the event loop:
Future.delayed(Duration.zero, () {
Navigator. ...
});
The other more flutter-y way of doing it would be to use the Scheduler to schedule a call for after the current build/render cycle is done:
SchedulerBinding.instance.addPostFrameCallback((_) {
Navigator. ...
});
Either way should eliminate the problem you're having.
Another option is also possible though - in your ExtendedFloatingActionButton where you call pop:
ExtendedFloatingActionButton(
text: "ORDER DETAILS",
action: () {
Navigator.of(context).pop();
},
),
you could instead simply do the call to Navigator.of(context).popUntil.... That would eliminate the need for the doing anything after bottomSheet.closed is called. However, depending on whatever else you might or might not need to do in your logic this may not be ideal (I can definitely see the issue with having the bottom sheet set off a change to the main part of the page and why you've tried to make that happen in the page's logic).
Also, when you're writing your code I'd highly recommend separating it into widgets - for example the bottom sheet should be its own widget. The more you have in a build function, the harder it is to follow and it can actually have an effect on performance as well. You should also avoid using GlobalKey instances wherever possible - you can generally either pass objects (or callbacks) down if it's only through a few layers, use the .of(context) pattern, or use inherited widgets.
For those who are invoking the Navigator as part of the build process. I found that it will intermittently throwing asserting error on the debugLocked
I avoided this issue by wrapping with a addPostFrameCallback:
WidgetsBinding.instance.addPostFrameCallback((_) {
Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => MyPage()));
});
I had this same issue any answer not worked for me and this error doesn't explain any thing.
After going each line code i found that we cannot launch any state in build method like this
#override
Widget build(BuildContext context) {
var viewmodel = Provider.of<ViewModel>(context);
Navigator.of(context).push(MaterialPageRoute(builder:
(context)=>CreateItemPage(viewmodel.catalogData))); // this is way i was getting error.
return Scaffold();
}
I was getting error in CreateItemPage screen because of that line.
Solution of this issue create button which call this line Navigator.of(context).push(MaterialPageRoute(builder: (context)=>CreateItemPage(viewmodel.catalogData)));
For me, it was coming because I created a cycle of pushes that was causing this error.
For example,
In the Initial route which was /loading the code was pushing /home
class _LoadingState extends State<Loading> {
void getTime() async {
// DO SOME STUFF HERE
Navigator.pushNamed(context, '/home');
}
#override
void initState() {
super.initState();
getTime();
}
And in the /home initState I was pushing /loading creating a cycle.
class _HomeState extends State<Home> {
#override
void initState() {
super.initState();
Navigator.pushNamed(context, '/loading');
}
Add Some Delay Then Try to do this Your Problem will be Solved :
Future.delayed(const Duration(milliseconds: 500), () {
// Here you can write your code
setState(() {
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) => SetCategory()),
(route) => false);
});
});
I had similar error, like a dialog box which had a logout button, which when pressed goes to login screen, but an _debugLocked error occurs, so I used
Navigator.of(context).pushNamedAndRemoveUntil('/screen4', (Route<dynamic> route) => false);
This removes all routes in the stack so that user cannot go back to the previous routes after they have logged out.
Setting (Route<dynamic> route) => false will make sure that all routes before the pushed route are removed.
I don't know if this is the "real" solution but it helped me as a beginner to Flutter.
I've gotten this error due to a typo accidentally calling Navigator.of(context).push during my build():
E/flutter ( 6954): [ERROR:flutter/lib/ui/ui_dart_state.cc(198)] Unhandled Exception: 'package:flutter/src/widgets/navigator.dart': Failed assertion: line 2845 pos 18: '!navigator._debugLocked': is not true.
The simulator flashed a more informative error:
setState() or markNeedsBuild() called during build.
This Overlay widget cannot be marked as needing to build because the framework
is already in the process of building widgets. A widget can be marked as needing
to be built during the build phase only if one of its ancestors is currently
building. This exception is allowed because the framework builds parent widgets
before children, which means a dirty descendant will always be built.
Otherwise, the framework might not visit this widget during this build phase The
widget on which setState() or markNeedsBuild() was called was:
Overlay-[LabeledGlobalKey<OverlayState>#de69b]
The widget which was currently being built when the offending call was made was:
FutureBuilder
Basically, you should not be trying to push/pop to a new route in the middle of a build. If you really need to, wait for the build to finish, which is why others are suggesting wrapping it in a SchedulerBinding.instance.addPostFrameCallback to execute after everything is rendered, but you probably should find a better way to do this outside of a build.
In my case, I typed:
onTap: _onTap(context),
when I really meant to type:
onTap: () => _onTap(context),
my _onTap handler was doing the Navigator push. I had forgotten to wrap my handler in a closure that captures the context it needs, and instead actually was executing it instead of passing onTap: my callback.
Dialog solution
For those who encounter this when calling Navigator.push(..) from a Dialog.
You need to do Navigator.pop(context);to programmatically close modal first, then call Navigator.push(..).
For people encountering this issue while using bloc, make sure you are using navigation in a BlocListener (or BlocConsumer's listener). In my case I was using Navigator inside BlocBuilder. I am new to Flutter/Bloc and the accepted answer resolved the problem, but was not the proper solution. Switching my BlocBuilder to a BlocConsumer allowed for me to navigate during specific states.
Example of using BlocConsumer, navigate when state is 'LoginSuccess':
BlocConsumer<LoginBloc, LoginState>(
listener: (BuildContext context, state) {
if (state is LoginSuccess) {
Navigator.of(context).pushReplacement(
// Add your route here
PageRouteBuilder(
pageBuilder: (_, __, ___) => BlocProvider.value(
value: BlocProvider.of<NavigationBloc>(context),
child: HomeScreen(),
),
),
);
}
},
// Only build when the state is not LoginSuccess
buildWhen: (previousState, state) {
return state is! LoginSuccess;
},
// Handle all states other than LoginSuccess here
builder: (BuildContext context, LoginState state) {
if (state is LoginLoading) {
return Center(child: CircularProgressIndicator());
} else .....
In resume, you just need to remove it from your initState.
I would recomend extend the class with AfterLayout and inside the
afterFirstLayout you can redirect it to the page you want. This will garantee that everything is ok before routing.
See bellow the steps:
Add to pubspec: after_layout: ^1.0.7+2
Then, You will extend it to the class you want to use. In my case was a statefull widget named HomePage. So it will looks like:
class HomePage extends StatefulWidget {
#override
HomePageState createState() => HomePageState();
} //no changes here
class HomePageState extends State<HomePage> with AfterLayoutMixin<HomePage> {
//the with AfterLayoutMixin<pageName> is the only thing you need to change.
Now, you need to implement a method called afterlayout, that will be executed after the build is completed.
#override
Future<void> afterFirstLayout(BuildContext context) {
//your code here safetly
}
You can find information here:
https://pub.dev/packages/after_layout
For those that still have the same issue, this help me to solve it.
navigationService.popUntil((_) => true);
navigationService.navigateTo(
'authentication',
);
basically i wait until the navigation finish setting everything and then call the navigateTo.
I got this error because my initialRoute was /login. However, the initialRoute is required to be /.
If the route name starts with a slash, then it is treated as a "deep link", and before this route is pushed, the routes leading to this one are pushed also. For example, if the route was /a/b/c, then the app would start with the four routes /, /a, /a/b, and /a/b/c loaded, in that order.
Here is a link to the docs for reference.
I had the same issue and took me some time to figure out. I was listening to the state on the screen based on which it will navigate to different screen. And then on button click I was changing that state and navigating to different screen which was causing an issue.
I am using flutter version 2.3.3
I also faced this issue when i try to pop back into my home screen from a second screen with command Navigator.pop(context)
I solved this issue by replacing this line of code with Navigator.of(context).pop(context)
It worked fine for me hope it hepls
How do I position a FloatingActionButton on the left side inside a Scaffold?
Currently the only available options are centerFloat, centerDocked, endFloat and endDocked.
Maybe Material Design does not intend to position the FAB at startFloat or startDocked.
That would be fine if RTL changed endFloat and endDocked to appear on the left side, but that is not the case.
In April 2020, the available options have been expanded and startFloat as well as startDocked are included options now.
Here is the full list of available options (see the FloatingActionButtonLocation documentation):
centerDocked
centerFloat
centerTop
endDocked
endFloat
endTop
miniCenterDocked
miniCenterFloat
miniCenterTop
miniEndDocked
miniEndFloat
miniEndTop
miniStartDocked
miniStartFloat
miniStartTop
startDocked
startFloat
startTop
You can even easily define your own locations using StandardFabLocation.
As of 2020, you can use the following:
floatingActionButtonLocation: FloatingActionButtonLocation.startFloat
A parameter that can be passed to the Scaffold Widget from material.dart
Source: PR 51465
There is also another solution to this problem. Fab button by default is always at the bottom end of the screen. So if we wrap our Scaffoldwith a Directionality and set its text direction to TextDirection.rtl, then the button goes left. but since now the body itself is mirrored, we can wrap the body with another Directionality and set its text direction to TextDirection.ltr
#override
Widget build(BuildContext context) {
return
Directionality(
textDirection: TextDirection.rtl,
child:Scaffold(
appBar: AppBar(
title: const Text('Something),
),
body: Directionality(
textDirection: TextDirection.ltr,
child: Center(child: const Text('Press the button below!'))),
floatingActionButton: FloatingActionButton(
onPressed: () {
},
child: Icon(Icons.navigation),
backgroundColor: Colors.green,
),
)
);
}
Nothing is working to get multiline text to be wrapped with Right aligment
#override
Widget build(BuildContext context) {
var tt = "ومن رأى: أن إبرته التي يخيط بها انكسرت أو انتزعت منه، فإن شأنه يتفرق ويفسد أمره، وتدل الإبرة أيضاً على المرأة لإدخال الخيط فيها، وكذلك المسلة، فمن رأى أن بيده مسلة وكانت إمرأته حبلى ولدت له إبنة، وإن لم يكن هناك حمل دل ذلك على سفره.";
return new Scaffold(
appBar: new AppBar(
title: new Text(gettitle()) ,
),
body:
new Directionality(textDirection: TextDirection.rtl, child:
new Padding(
padding: const EdgeInsets.all(16.0),
child:
new SingleChildScrollView(
child:
new Text(
tt,
textAlign: TextAlign.right,
textDirection: TextDirection.rtl,
)
,)
),
)
);
}
Doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.3.2, on Mac OS X 10.13.4 17E202, locale en-JO)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.2)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.3)
[✓] Android Studio (version 3.0)
[✓] Connected devices (1 available)
• No issues found!
Process finished with exit code 0
I'm pretty sure this is a bug. As you say, it seems to only happen with multi-line text. With this minimal example:
#override
Widget build(BuildContext context) {
return new Directionality(
textDirection: TextDirection.rtl,
child: new Scaffold(
appBar: new AppBar(
title: new Text(ttrtl2),
),
body: new Padding(
padding: const EdgeInsets.only(right: 10.0),
child: new Text(
ttrtl,
style: new TextStyle(fontSize: 24.0),
),
),
),
);
}
the starting characters are not missing, but only because I have added padding on the right. It doesn't seem to be a problem with the SingleChildScrollView, because I can reproduce it with the code above. (Incidentally, SingleChildScrollView can take padding, so the same work around works.)
If you toggle Debug Paint you can see that the leading characters overlap the padding, which is why, when there is no padding, the leading characters are truncated.
You could switch to the dev channel, and try again. Or live with adding a few pixels of right padding. Or check for existing issues (I didn't see one, myself) and enter an issue.
Debug Paint Screenshot shows the text bleeding into the padding...