I can't make scrollable the part highlighted in red
And this is my code:
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
_headerWidget(),
_actionWidget(),
_backgroundWidget(),
_bottomBar()
],
)
);
}
}
Widget _bottomBar() => Positioned();
Widget _headerWidget()=> Positioned();
Widget _actionWidget() => Positioned();
// need scrolling in below widget !
Widget _backgroundWidget() => Positioned(
top: 320,
bottom: 0,
left: 0,
right: 0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Card(...),
Card(...)
]
)
);
I want scroll this part of the page _backgroundWidget() I tried putting a height together with the ListView, but it didn't work, so I went back to the initial code.
If you use listview then use property shrinkWrap:true. But I think Singlechilscrollview will work for you. First try Wrap a Container with Singlechildscrollview, then container's child will be Column. For testing purpose give your container a specific height.
Wrap your Column widget with ListView
Widget _backgroundWidget() =>
Positioned(
top: 320,
bottom: 0,
left: 0,
right: 0,
child: ListView(
shrinkWrap: true,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Card(...),
Card(...)
]
),
],
)
);
Related
I am trying to build a widget like https://imgur.com/a/KRKj4SW which is an item of listview.builder.
The widget tree is like this:
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Divider(),
Container(
height: 100,
width: screenWidth,
child: Stack(
children: [
Positioned(
left: 45,
child: Row(
children: [
// circular button widget
Expanded(
child: Column(
// text title widget
//text subtitle widget
// text duration widget
// progress duration widget
),
)
],
),
),
//rotated day widget
Positioned(
left: 0,
top: 10,
child: Transform.rotate(
angle: -pi / 2,
child: Text('day'),
))
],
),
)
],
);
The problem is that if I remove the height=100 of parent of stack, error occurs and nothing is rendered in the entire screen.This error is so bad that hot reload/restart does not work afterwards. I do not want to provide static height because the texts and other widgets in column are conditionally rendered and giving static height would sometimes leave massive space at bottom or not enough space to render widget in the stack.
I am using Stack here because the Transform.rotate widget would occupy same horizontal space as if it was not rotated and the space between rotated test and circular button would be large.
This is a page of my app. I'm trying to have a space to put widgets and then a sidebar on the right.
import 'package:flutter/material.dart';
class Looper extends StatefulWidget {
#override
_LooperState createState() => _LooperState();
}
class _LooperState extends State<Looper> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(children: [
Flexible(
flex: 21,
child: FittedBox(
fit: BoxFit.cover,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
],
),
)
),
Flexible(
child: Container(),
flex: 2,
),
]));
}
}
But I get:
Horizontal viewport was given unbounded width.
I tried multiple BoxFit like fitHeight and fitWidth but none of them work. Changing FittedBox by a Container gives the same error but for height;
I kind of understand the error. The ListView doesn't get boundaries from where to grow. However, the Scaffold, as I imagine, already should provide those bounds. I souldn't need to make everything fit inside a Container with the width and size of the phone screen.
In such cases, you can use shrink wrap. Try this out.
Row(children: [
Flexible(
flex: 1,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: [
Text('Shrink wrap is usefull.')
],
)
),
Flexible(
child: Container(),
flex: 1,
),
])
I am trying to create a resume document similar to the attached image. Need some help on top-level layout
Would it be:
container
children
column widget
children
container (header)
container (body)
children
column
children
row (education)
row (experience)
also, how would I get the dotted lines?
Thanks for your help
It would be:
container
children
column widget
children
container (header)
container (body)
child
row
children
column (education)
column (experience)
For Dash Lines, you can use the following Plugin Flutter Dash
Another alternative would be:
column widget
children
Row (header)
Row (body)
children
column (education)
column (experience)
To achieve the exact layout in the body section, you might want to use to Expanded Widget to achieve what you want.
column widget
children
Row (header)
Row (body)
children
Expanded [Flex 1]
child
Container (education)
Expanded [Flex 2]
child
Container (experience)
For Dash to work:
You need to add flutter_dash: ^0.0.1 under dependencies in pubspec.yaml
import 'package:flutter/material.dart';
import 'package:flutter_dash/flutter_dash.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
'/': (BuildContext context) => MyApp2(),
},
);
}
}
class MyApp2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 3,
)
],
),
Dash(
direction: Axis.horizontal,
length: MediaQuery.of(context).size.width,
dashLength: 12,
dashColor: Colors.red),
Row(
children: <Widget>[
Expanded(
child: Text('Education'),
flex: 1,
),
Dash(
direction: Axis.vertical,
length: (2 *MediaQuery.of(context).size.height) / 3 - MediaQuery.of(context).padding.top,
dashLength: 12,
dashColor: Colors.red),
Expanded(
child: Text('Experience'),
flex: 2,
),
],
),
],
);
}
}
You can try this too:
...your document...
Container(
child: Column(
children: <Widget>[
Container(
child: ....header....,
),
Container(
...body...
child: Row(
children: <Widget>[
Container(
child: ...education...
),
Container(
child: ...experience...,
),
],
),
),
],
),
);
I am using ListWheelScrollView Widget to give a wheeling effect to my list item but getting the error as mentioned. I just want to show Stacked Items with some image and texts in individual list item and give a 3D Wheeling effect to them.
Below is my code ->
class ExploreWidget extends StatefulWidget {
#override
State<StatefulWidget> createState() => _ExploreState();
}
class _ExploreState extends State<ExploreWidget> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: null,
body: Column(
children: <Widget>[
_header(),
_exploreList()
],
)
);
}
Widget _header(){
return SizedBox(
height: 200,
width: 800,
);
}
Widget _exploreList(){
return ListWheelScrollView.useDelegate(
itemExtent: 75,
childDelegate: ListWheelChildBuilderDelegate(
builder:(context,index){
return Container(
height: 500,
width: 800,
child: Stack(
children: <Widget>[
Image(image: AssetImage(
_products[index].image
)),
Text(_products[index].name,style: Style.sectionTitleWhite,),
Text('70% off',style: Style.cardListTitleWhite,),
],
),
);
}
),
);
}
}
The error was occuring due to the way _exploreList() widget is implemented. This widget is wrapped inside Column which doesn't scroll in itself. Moreover, you are returning a ScrollView that has an infinite size. Hence it was throwing the said error. To resolve this issue, wrap _exploreList() widget inside Flexible which takes only minimum available space to render and scroll. Working sample code below:
body: Column(
children: <Widget>[
_header(),
Flexible(
child: _exploreList()
)
],
)
Now you should be able to use WheelScrollView properly.
I am use Flutter for web for make website. I want make webpage scroll when user scroll down like normal website.
I am try use Stack so I can place custom background behind widgets. This background must scroll when user scroll (must stick to widgets in front so background change).
(I cannot set background color using Scaffold because my background is use CustomPainter)
But I want center the widgets on webpage, so I wrap SingleChildScrollView in Center widget. But now on large horizontal screen the CustomPaintWidget() is not fill screen (there is blank space). I have try replace my CustomPaintWidget() with Container to test, but same issue.
Here my code:
Center(
child: SingleChildScrollView(
child:Stack(children: <Widget>[
CustomPaintWidget(),
Widgets(),
],),
Anyone know solution?
How to center widgets but also make background stretch?
Thanks!
SingleChildScrollView by definition shriknwraps it's child.
What you should try is
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ConstrainedBox(
//Use MediaQuery.of(context).size.height for max Height
constraints: BoxConstraints(minHeight: MediaQuery.of(context).size.height),
child: Center(
child: //Widget,
),
),
);
I think you can try something like:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
CustomPaintWidget(),
Center(
child: SingleChildScrollView(
child: Widgets(),
),
)
],
));
}
read that post, I think is all you need https://medium.com/#swav.kulinski/spike-parallax-in-flutter-seven-lines-of-code-16a1890d8d32
I know it is too late to answer but s.o may need it in future
You have to use Stack
for instance:
your MainClass:
class _BodyState extends State<Body> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
ScrollViewClass(),
Column(
children: [
//YOUR ITEMS
]),
);
ScrollviewClass:
class ScrollViewClass extends StatefulWidget {
#override
_ScrollViewClassState createState() => _ScrollViewClassState();
}
class _ScrollViewClassState extends State<ScrollViewClass> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
margin: EdgeInsets.only(top: 260, bottom: 100),
child: ListView(
children: [
Container(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: ConstrainedBox(
//Use MediaQuery.of(context).size.height for max Height
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height),
child: Column(
children: [
//ADD YOUR ITEMS LIKE IMAGE, TEXT, CARD ETC...
Center(child: Image.asset('assets/app_name.png')),
Center(child: Image.asset('assets/app_name.png')),
Center(child: Image.asset('assets/app_name.png')),
Center(child: Image.asset('assets/app_name.png')),
Center(child: Text('fdgdfg')),
Center(child: Text('fdgdfg')),
],
)),
),
)
],
),
));
}
}
I know this is not the OP's scenario, but for others - If there is something above your scroll view, using the full height of the page will cause the scrollview to scroll prematurely, because the combined height of the widgets is now greater than the page height. Use LayoutBuilder instead of MediaQuery.of(context).size.height.
LayoutBuilder(builder: ((context, constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: constraints.maxHeight),
child: Center(child: child)),
);
})