I need to make animation like Hero in two different widgets. Is that possible?
Widget a with image a and widget b with image a but widget a is inside a listview and widget b is full screen image(it hide listview)
It's very simple. You just need to wrap both widgets in a Hero widget using the same TAG property value. The snippet below is assuming you've a Image in a ListTile and after user clicks you show a new page with the same image but that image will be animated by Hero widget.
In list page the list items can be
ListTile(
leading: Hero(
tag: IMAGE_TAG, // must be the same in different pages
child: Image(image: AssetImage('you_asset_dir/yourImage.png')),
),
title: Text('Anything'),
onTap: () => // Just go to full screen page
);
In full screen page
Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Hero(
tag: 'IMAGE_TAG', // must be the SAME VALUE DEFINED IN list tile hero child widget.
child: Image(image: AssetImage('you_asset_dir/yourImage.png')),
),
),
);
OBS: The Hero tag property must be the same in different contexts but if you have a list with many items using Hero widget each Hero int the same context/page must have different tag values.
To deep dive concepts about Hero animations check the official doc
Related
Say there is a Scaffold with a bottomNavigationBar property that is populated. If you use a Stack with a Align widget inside its body set to Alignment.center, the Align widget gets centered accounting to the bottomNavigationBar and centers in the remaining space minus that.
How do I get it so that it centers according to the total screen height, using all these widgets?
Stack(
body: Align widget with center alignment and some child,
bottomNavigationBar: Bottom app bar
)
I'm not entirely sure what you mean in your question - but I think you want the body of a Scaffold (not Stack) to center a widget for the whole height available on the device.
Here's how you could do that using a Scaffold, SizedBox and Center widgets along with a MediaQuery
Scaffold(
body: SizedBox(
height: MediaQuery.of(context).size.height,
child: Center(
child: Text("CENTERED")),
),
bottomNavigationBar: BottomNavigationBar(items: []),
)
Scaffold
Sized Box
Center
Media Query
Hopefully that puts you on the right path.
Is there a way to make a few widgets static upon a PageView change?
I know I can make one widget static by wrapping the Scaffold within a Container, and have that Container have something like a decoration, but I don't know how to add more widgets that do not change when a page changes.
I have a few widgets that change when the page view changes, but then I want to have, say a Button below those widgets that stay still, but
if I put the same Button in every widget, it will swipe through and show two buttons when I change the page momentarily.
I just figured it out, I thought the PageView can only be assigned to the body property of a Scaffold, but wrapping it within a Column like this works. So just add the static widgets within the Column!
return Container(
decoration: BoxDecoration(), // For background.
),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Column(
children: [
Flexible(child: pageView),
// Static Widgets here!
],
),
),
);
I am new to flutter. I followed a tutorial in which they demonstrated two widgets: a Scaffold and a FloatingActionButton.
floatingActionButton: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.deepOrange,
child: Icon(Icons.add, color: Colors.black),
)
Here we are using the child property to specify the icon.
body: Text("Hello world"),
Here we are using body inside the Scaffold.
What is the difference between child and body and where do we use them?
What is the difference between child and body and where do we use
them?
They are just different names.
Most widgets in flutter use child or children to represent the Widget that should be rendered below the widget in the WidgetTree, but in the case of Scaffold the property is named body, to make it clear that the body widget will be rendered as the body or the largest part of the screen in the app as Scaffold also accepts appBar, floating action button, etc.
What's important here is that whether body or child they are both of type Widget
I am trying to align a button at bottom of a scrollable screen. For scrolling I used SingleChildScrollView and inside which I added all the widgets. Now the only issue I face is the button is not sticking at the bottom on scroll. Help would be appreciated.
As you can see in the image, the buy now button and add to cart button aligned at bottom. If we scroll the entire page, the button will not be scrollable, instead it will be sticking at bottom. I want to implement in this way.
You can use an stack and put All the widgets except button as its First child and then the button as another child of stack. Below it the example code -
class MyNewApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
alignment: Alignment.center,
children:[
Container(
height:MediaQuery.of(context).size.height,
width:MediaQuery.of(context).size.width,
child:SingleChildScrollView(
child: Column(
// Provide Your Widget here
),
),
),
Positioned(
bottom:0,
child:Align(
alignment:Alignment.center,
child: RaisedButton(
child:Text("Button"),
onPressed:(){},
),
),
),
],
),
);
}
}
I have positioned(using Align) two child widgets within stack widget and one of it contains form TextField to take input. When I clicked to enter data, only it's parent widget is moved up on Keypad entered as in the below picture.
Is there any way to move/resize the child widgets of stack while entering data from keypad.
Source code:
return Scaffold(
body: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/playingboard2.jpg'),
fit: BoxFit.cover)),
child: null,
),
_buildSelfPlayer(), // Returns the widget with form input and other widgets
_buildBank(), // top center, shows two pictures of bank
],
),
);
I don't see another fix for this, while also making use of Stack widget.
So instead I'd suggest you to use Column widget wrapped inside a SingleChildScrollView. I tried it and it works as intended. The other children move up too along with the TextField, so maintaining the distance between them and not overlapping.
For the background image, you can wrap the Scaffold in a Container, use that image in the Column decoration and make the Scaffold's backgroundColor to Colors.transparent.