I've been wondering how to implement a really cool little feature I saw in the Algorand app. I've attached a picture to help illustrate what I mean.
The middle button of the navigation bar at the bottom animates the Send and Receive button onto the view, and then changes it's icon to a cross. These buttons persist when you navigate to other views through the other 4 bottom navigation bar items. And when you click the middle cross button, they disappear.
I tried for a bit to implement this in Flutter. My best attempt was creating my own Bottom Navigation Bar widget for my scaffold, containing the bottom icons and a couple buttons on top, but this seemed really janky. I'm not asking for specific code examples of how to get this done, just rather a point in the right direction of how to do this kind of thing.
Speaking of specific code, their code is actually open source, and the code for the bottom nav bar is here
https://github.com/algorand/algorand-wallet/blob/master/ios/Classes/ViewControllers/Core/Container/TabBar/TabBarController.swift
I've been reading it but unfortunately my Swift is not all that great, working through it line by line. I can make a custom bottom nav bar with Container and Row, and then figure out the onTap behaviours, but it's the presenting two buttons above it that's really blocking me.
Scaffold’s floatingActionButton parameter is exactly what you’re looking for.
Need two buttons? No problem, it doesn’t have to be a FloatingActionButton, it can be any widget, including a Row.
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton.extended(
icon: Icon(Icons.arrow_upward),
label: Text('Send'),
onPressed: (){},
backgroundColor: Colors.redAccent),
Padding(padding: EdgeInsets.symmetric(horizontal: 8)),
FloatingActionButton.extended(
icon: Icon(Icons.arrow_downward),
label: Text('Request'),
onPressed: (){},
backgroundColor: Colors.teal),
]
),
Then to trigger it with a button press, just make it conditional:
bool appear = false;
...
floatingActionButton: appear ? Row(...) : null
Then you can make it appear or disappear by changing the boolean in your button’s onPressed (and don’t forget to call setState).
Related
I made a Chat app, I made two Text widgets inside a Column widget, now I want to make the Chat message (the 2nd text Widget) Text Widget to go Vertically after filling the spaces horizontally, so what can I do, this is the image of the Chat screen
and What happens is this(image), the images are embedded because I'm a new user
The Code of it is this:-
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
/// USER NAME
Text(userName, style: Theme.of(context).textTheme.subtitle),
/// CHAT MESSAGE
Container(
margin: const EdgeInsets.only(top: 5.0),
child: Text(
theText,
maxLines: null,
style: Theme.of(context).textTheme.body2,
),
),
],
),
I expected the Code to work like the traditional Chat app's messages, the First text widget (USERNAME) worked but the 2nd one (the actual CHAT MESSAGE) didn't work as it Overflows by pixels, So how can I fix this and Make it like the traditional Chat Messages??
I resolved the problem! And here it is:
I just wrapped my whole Column widget with a Flexible widget and it resolved my problem and now I can add Multiline Messages!
I'm keeping the post as to any Newbie facing the same problem 'may' find this useful...
I've started developing in Flutter with webview, charts, tables, but I met some problems with tables.
I use DataTable to represent data in a table.
There is a first problem. By default, it isn't scrollable if data is out of a screen. So I embedded in some Widgets (i.e. SingleChildScrollView, ListView), but it was scrollable only in one direction (vertical or horizontal). I searched something about it and I found a plugin for both directions (bidirectional_scroll_view 0.0.6). After compilation I received an error
Because app depends on bidirectional_scroll_view >=0.0.2 which
requires SDK version <2.1.0, version solving failed.
I'm using Dart SDK version: >=2.1.0 <3.0.0 in configuration.
Next, I found PaginatedDataTable which allows scrollable in both directions, but it is paginated table.
So anybody know is it possible to somehow scroll DataTable in both directions (vertical and horizontal)?
The second question (more important): is it possible to set background colour in header (first) row and first column in a table? Or even in any cell in a table?
For DataColumn/DataCell I tried embed Text in Container and then set Container colour, but the background colour was only set for text, the rest of a cell was with default colour.
i.e.
DataColumn(label: Container(child: Text('2011'), color: Colors.grey,)),
And is it possible to fixed/freeze header (first) row and first column. I mean the table is scrolled and first row/column is always visible on a screen. I couldn't find any solution ..
Expanded(
child: ListView(
children: <Widget>[
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable()
)
]
),
)
child: Center(
child: ListView(
children: [
DataTable()
],
scrollDirection: Axis.vertical,
)
)
I am using following in my build() method of 1st screen to change status bar color and it works fine.
// 1st screen's build() method
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.green),
);
However when I navigate to 2nd screen the 1st screen status bar color appears on the 2nd screen too. And in 2nd screen's build() method, I am using the same code with different color
// 2nd screen's build() method
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.red),
);
I had a similar problem and found the solution. The best way is to use AnnotatedRegion under Scaffold without AppBar (appBar is null) instead of the function SystemChrome.setSystemUIOverlayStyle() to set the system ui color.
Something like:
Scaffold(
body: AnnotatedRegion(
value: SystemUiOverlayStyle(statusBarColor: Colors.red)
child: MyBodyWidget(),
),
);
Btw, the value can be SystemUiOverlayStyle.dark or SystemUiOverlayStyle.light if you only want dark or light overlay instead of a color. Note that statusBarColor only works in Android so far.
Also note that appBar has to be null (absent) for AnnotatedRegion to work. You can write your own MyAppBar widget easily inside MyBodyWidget.
Try setting the 2nd status bar color before doing the Navigator.push to the second screen. Like this
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.red),
);
await Navigator.of(context).push(MaterialPageRoute(
builder: (context) => SecondScreen();
));
From Flutter Docs
Call this API in code whose lifecycle matches that of the desired system UI styles. For instance, to change the system UI style on a new page, consider calling when pushing/popping a new PageRoute.
It has a simple solution.
It is one way of several method.(AnnotatedRegion)
First, top parent page buildcontext in Saffold
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent, <---- transparent.
and 2nd page of 3rd page ...
if Appbar : Appbar( backgroundcolor: Colors.red <---- want color.
if no Appbar : Scaffold( backgroundcolor: Colors.red <---- want color.
This way, if you do a navigation pop, Page status color return the background color of Appbar or the background color of the scaffold.
It's my shortcut and I hope it helps.
Tried to research around but couldn't find a solution. I would like to use the CupertinoSliverNavigationBar which is the large title version of the top navigation bar I could achieve this in Xcode Storyboard but simply adding buttons to the top bar but the trailing option only allows a single widget.
I tried using a Row() but that messes up the location and the title aloooot.
Composing your comment coversation into an answer:
CupertinoSliverNavigationBar(
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: ...
))
You also asked how one would go about removing the shadow below the navigation bar. That is impossible with the CupertinoSliverNavitionBar Widget. Taking a look at the constructor, you will notice that there is nothing like an elevation value. You would have to create a custom widget for this.
This also makes sense because it should look like "iOS-11-style" and removing the shadow would remove that feature.
Is there any way to include a Floating Action Button in a screen consisting of a CustomScrollView with a SliverAppBar and a SliverList?
I want to be able to have the default behaviour of a sliver list with a FAB fixed on the screen.
Is it possible?
You can still use the Scaffold when you're using the SliverAppBar such as:
new Scaffold(
body: new CustomScrollView(
slivers: <Widget>[
new SliverAppBar(...),
...
],
),
floatingActionButton: new FloatingActionButton(...),
);
Otherwise, you can generally use a Stack above the CustomScrollView and the FloatingActionButton (in a Positioned) as well.