I want to implement a dashboard that has 2 widgets: a menu panel and a panel where information is displayed.
I also want that if you click the top left button, the panel would collapse and the information panel would be 100% of the screen's width.
How can I resize a widget on button click?
Wrap you sidebar with an AnimatedContainer. Then, set the width property on that container to width: isExpanded ? 200 : 0, where isExpanded is a bool that specifies whether or not the sidebar should be expanded, and 200 is the width that you want the sidebar to be when expanded.
To toggle the sidebar to be expanded or not, simply call this:
setState(() { isExpanded = !isExpanded; });
Related
I set two widgets in a Stack(), the one in the back is a sidebar and the one in the front is my main page.
When I click on the menu button from the main page, the main page gets shifted to the right and then the user can see the sidebar.
Now the problem is when the sidebar gets displyed i'm obliged to click exactly on the menu button to go back to the main page.
What i want to do is just to click anywhere in the main page to hide the sidebar.
I mean that i want to set the whole main page as a button when the sidebar is displayed.
You can use InkWell
InkWell(
onTap: (){
/// do something
},
child: Text('data') /// your widget,
),
You can also use GestureDetector
Generally if you want to make anything tappable you can just wrap the widget with GestureDetector
I fixed it by wrapping the main page with InkWell() and I added this to the onTap property"
InkWell(
onTap: isSidebarCollapsed ? () {
setState(() {
isSidebarCollapsed = false;
});
} : null,
child: Container(...)
)
Note that isSidebarCollapsed is the variable that determines if the menu is displayed or not.
Explaination of the code:
If the sidebar is collapsed (is displayed) then the onTap property returns a function where I set the variable isSidebarCollapsed to false (to say that the sidebar is gonna be hidden).
Else it returns null
I have ListView.builder with horizontal scrolling (a custom top navigation bar). As I scroll to the right and left, the 'selectedIndex' is changing, but the UI inside this widget isn't showing this change in position. I'd like to 'Jump To' the selected index upon swiping.
Here's how my ListView is currently updating its index:
void onChanged(int index) {
pageController.jumpToPage(index);
setState(() {
this.selectedIndex = index;
});
}
How can I accomplish this? Any guidance would mean a lot.
Thanks, A.V.
You can calculate selected item offset by item width and height and then use
_gridViewController.jumpTo(calculatedOffset);
I would like to create something like this
I have a page with a list of products and I would like to make visible the "Cart" part only when I scroll to the bottom of the screen and when I click on a product and be able to swipe up to navigate to the cart screen.
A solution could be making a Stack with two Container inside and have a variable that represent the current % of screen of the first Container (products) and moving them with the widget Positioned. So when I scroll to the bottom, I can raise up the product container and reveal the cart container and same thing when I swipe up the first container.
This is an example of the vertical drawer with % and Positioned
Is there a better solution?
EDIT
I did it, but it's not very smooth
The structure:
CustomScrollView()
|
|____SliverList()
| |
| |____Visibility() => Container() //Products list
| |
| |____Visibility() => Container() //Bottom Container with Borders
|
|____SliverList()
|
|____Visibility() => Container() //Bottom Cart part
|
|____Visibility() => Container() //Cart Screen
Starting with only Products List visible
When user clicks on a product, Bottom Container and Bottom Cart will be visible
I also put a GestureDetector() in Bottom Container and Bottom Cart.
With onVerticalDragUpdate if the user swipe up (details.delta.dy < 0):
_controller.animateTo(
_controller.position.maxScrollExtent,
duration: Duration(seconds: 1),
curve: Curves.fastOutSlowIn,
);
And set visibility of Bottom Cart to false and set the Cart Screen visibility to true
As well I can might set the visibility of Products List to false, but this will cause a bug in the scroll animation so I set the mobile screen to only show Bottom Container and Cart Screen with the screen width (I didn't test it on other devices, this may be an error on ui) and I also block the scrolling with NeverScrollableScrollPhysics() in the CustomScrollView
On Swipe down on the Bottom Container, I set the visibility of Cart Screen to false, Bottom Cart to true and set CustomScrollView physics to AlwaysScrollableScrollPhysics() and made a scroll animation:
_controller.animateTo(
_controller.position.maxScrollExtent,
duration: Duration(seconds: 1),
curve: Curves.fastOutSlowIn,
);
That's not very smooth because a better animation could be moving down the Cart Screen with Positioned, instead of making it invisible
If we have a Visibility widget on top of our screen and we click to display it at the end of our screen scrolling top manually, why still this hidden? Does this mean that we need to do something like this instead?:
showWidget == true ? Text("hi") : Container();
Because code above is failing as well.
Video of the error:
https://youtu.be/YQ7nZ3LAENo
I would like the body of my scaffold to change size when the bottom sheet is expanded similar to how the Google Maps app responds when it's bottomsheet is pulled up (the map shrinks to about half the height of the screen).
body: _isSheetExpanded ? _buildBodySize1() : _buildBodySize2()
In your isExpanded() [or some similar method] for the bottom sheet in expanded state:
setState(){
_isSheetExpanded = true;
}
In the isCollapsed() method:
setState(){
_isSheetExpanded = false;
}