Hi all fellow developers,
I am developing a responsive web page in flutter using the flutter web SDK, but i am stuck at one part of the page where i have a Row inside row I have 2 Containers among which i want the 1st Container to be Scrollable and the Second container to be of constant size(Non scrollable) just like whatsapp web ui where contact list keeps scrolling but the chat side and the rest of the page doesn't.
please Help me,
Thanks in advance...
This should work You need a fixed sized container and make sure a Scroll able widget should be inside it. Now size can be made responsive by using Media Query Parameters and below code you only need to adjust space and sizing and it would work.
Row(
//Your parent Row
children: [
Container(
//static non scrollable container
child: Column(
children: [
//Children you want to add
//this wont be scrollable
//It is also preferred that you give this some height or width too
],
),
),
Container(
//Scrollable container
//Please adjust height and width yourself
//You can use media query parameters to make it responsive
width: 200,
height: 500,
child: SingleChildScrollView(
//You can also change the scroll direction
child: Column(
//Add children you want to be in
//Scrollable column
),
),
)
],
),
Related
I had a very basic Flutter layout which looked something like this:
Column
widget1
expanded
widget2
This worked great. Widgets 1 and 2 were rendered and my main "expanded" widget was taking the rest of the screen, great!
Next I wanted to add two buttons on each side of my expanded widget. So I tried this:
Column
widget1
Row
button1
expanded
button2
widget2
Now Flutter throws a layout error: failedAssertion: size.isFinite
Reading about it online, people are saying you cannot put an Expanded inside a Row or a Column because they use infinite main axis length, so if the child is also infinite this causes problems. However, I already had Expanded inside a Column and that worked fine! Why is putting it inside a Row problematic?
One SO suggestion was to put mainAxisSize: MainAxisSize.min in the Row, but that does not help.
Some of the other suggestions were to put the widget inside a Container with fixed sizes. This does resolve the error, but now the widget goes off screen. And this sort of defies the whole purpose of Flutter responsive UI. Why would anyone want to create a fixed sized object on a platform where screen sizes vary widely?
What am I doing wrong here? Seems I am misunderstanding something fundamental here...
it works fine and doesn't through any error
Column(
children:[
Container(
height:50,
width:50,
color:Colors.red),
Row(
children:[
Container(
height:50,
width:50,
color:Colors.red),
Expanded(
child:Text('hgdhj hdgakhjgck dgfkejg')
),
Container(
height:50,
width:50,
color:Colors.red),
]),
Container(
height:50,
width:50,
color:Colors.red),
])
I have a Stack with two Columns.
First column contains contains only one child (1) with InteractiveViewer which has defined height (for example 250). It changes its content's zoom and translation based on scroll offset of SingleChildScrollView from second column. It shouldn't be pushed out of the screen while scrolling, so it's under the scroll view in a stack.
The second column have SingleChildScrollView with top padding (2) OR first view (3) that matches the (1) height.
Now I'd like to make the top padding (2) or view (3) not scroll the SingleChildScrollView but pass those touch events to InteractiveViewer. Doesn't matter whether the solution use padding or empty view, I just wanted to note here than what I want can be achieved with padding or view. I tried both but failed.
I tried the GestureDetector, IgnorePointer and AbsorbPointer, but seems like the SingleChildScrollView always get the touch events. I haven't found a way to make the top padding not scrollable too.
Basically I'd like to achieve something similar to the attached gif, except that I don't need the "Collapsing Header" text animation and app bar. Just pay attention to the mountains that hide below the scroll view. The scroll view should take entire screen once the scroll offset is equal padding/view height (250 in this example).
Is that possible somehow? My logic behind InteractiveViewer is way more complicated than the example provided below, I just simplified it to make the question easier to understand.
Stack(children: [
Column(
children: [
Container( // (1) Widget that should get the touch events
height: 250,
child: InteractiveViewer(...)
),
],
),
Column(
children: [
Expanded(
child: SingleChildScrollView(
padding: EdgeInsets.only(top: 250), // (2) Either not scrollable padding
child: Column(
children: [
Container(height: 250), // (3) or not scrollable first item
Container(...)
],
),
),
),
],
),
]);
Now when I add a ListTile inside a view (no matter its Column,ListView,...) It gets whole width, I want it to be kinda wrap_content as we have in android.
I know this is an old post but here is a solution I found for future reference:
You can use the IntrinsicWidth widget to stop the ListTile from expanding.
Container(
child: IntrinsicWidth(
child: Column(
children: [
ListTile(title: Text("Hello")),
ListTile(title: Text("There")),
],
)
)
)
As far as I can tell this is not how you are supposed to use ListTile. In the docs it even says:
ListTile requires fixed width constraints
Also, regarding IntrinsicWidth the docs say:
This class is useful, for example, when unlimited width is available and you would like a child that would otherwise attempt to expand infinitely to instead size itself to a more reasonable width. [...] This class is relatively expensive, because it adds a speculative layout pass before the final layout phase. Avoid using it where possible.
may be like this
Row(
children: <Widget>[
ListTile(),
Text("hell")
])
I want to use BottomSheet as Footer but BottomSheet hide other container from body?
I think about 2 ways.
First way, Getting height of the BottomSheet and calculate
...
return Container(
height: MediaQuery.of(context).size.height - bottomSheetSize
children: [
Expanded(
child: Container(
color: Colors.white,
child: listView,
)
),
...
or second way, the BottomSheet doesn't cover a body
I don't know how to get size of the BottomSheet or not to cover body.
Can you help me with one of option?
You cannot do anything in the current screen if you open bottom sheets. If you are making a footer type of thing, use another container at the bottom of the first container wrapped in a column or use Stack and stack the footer on top of the first container.
In Flutter I am implementing "what's new" screens which will show a preview of the real screens in the app.
For that I reuse the screen Widgets in the "what's new" flow.
The preview will be shown in a smaller Container and not cover the whole screen.
I want to scale down the text sizes, line heights, etc. for all widgets within this Container to match the smaller bounds.
Is there a way to do this without individually adding a smaller style for every Widget separately?
e.g. scale down all fontSizes by 20% for a Widget child regardless of the size set in the theme
I found the solution. Wrapping the child widget tree with Transform.scale(...) will scale all the Widgets down the tree according to the supplied scale factor.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.scale(
scale: 0.9,
child: MyScaledWidgetTree(),
),
Container(
child: ...,
),
],
)