I used timelines package .It aligned in center by default. I want to align timelines from top left in Container but that doesnt work. Here is a code i have tried.
Container(
alignment: Alignment.topLeft,
child: FixedTimeline.tileBuilder(
builder: TimelineTileBuilder.fromStyle(
contentsAlign: ContentsAlign.basic,
connectorStyle: ConnectorStyle.solidLine,
indicatorStyle: IndicatorStyle.outlined,
contentsBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(24.0),
child: Text('Timeline Event $index'),
),
itemCount: 3,
),
),
),
There is a option for what you want in Timelines package.
Please give a 'nodePosition' option to 'theme' parameter in tileBuilder.
The 'nodePosition' can have value from 0 to 1.0 double type.
Because default value is a 0.5, timeline will be located at center.
theme: TimelineTheme.of(context).copyWith(
nodePosition: 0,
),
Container(
alignment: Alignment.topLeft,
child: FixedTimeline.tileBuilder(
theme: TimelineTheme.of(context).copyWith(
nodePosition: 0,
),
builder: TimelineTileBuilder.fromStyle(
contentsAlign: ContentsAlign.basic,
connectorStyle: ConnectorStyle.solidLine,
indicatorStyle: IndicatorStyle.outlined,
contentsBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(24.0),
child: Text('Timeline Event $index'),
),
itemCount: 3,
),
),
);
If you have used a column widget please add
crossAxisAlignment : CrossAxisAlignment.start
I'm afraid it's a limitation of the package that you're using, because it is designed to take all width available.
It looks like it helps a bit to wrap it in an IntrinsicWidth like this
Container(
alignment: Alignment.topLeft,
child: IntrinsicWidth(
child: FixedTimeline.tileBuilder(
builder: TimelineTileBuilder.fromStyle(
contentsAlign: ContentsAlign.basic,
connectorStyle: ConnectorStyle.solidLine,
indicatorStyle: IndicatorStyle.outlined,
contentsBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(24.0),
child: Text('Timeline Event $index'),
),
itemCount: 3,
),
),
),
)
But that still leaves some space on the left side for opposite content (or using ContentsAlign.reverse)
You can align widget with below code if your widget taking more width than it's size in the screen
crossAxisAlignment : CrossAxisAlignment.start,
For example,
Column(
crossAxisAlignment : CrossAxisAlignment.start,
children : [
FixedTimeline.tileBuilder(
builder: TimelineTileBuilder.fromStyle(
contentsAlign: ContentsAlign.basic,
connectorStyle: ConnectorStyle.solidLine,
indicatorStyle: IndicatorStyle.outlined,
contentsBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(24.0),
child: Text('Timeline Event $index'),
),
itemCount: 3,
),
),
]
)
Related
I build a flutter app with ads as a carousel slider as a bottom layer of the stack widget, and I have I list view in the top layer of the stack widget
and when the list is scrolled vertically it overlays the ads on the screen.
now I have a problem with the carousel slider, I can't scroll it manually and I can't click any
how to solve it?
demo code:
Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
children: [
CarouselSlider(
options: CarouselOptions(
autoPlay: true,
),
items: imgList
.map((item) => Center(
child: Image.network(
item,
fit: BoxFit.cover,
)))
.toList(),
),
ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.only(top: 210),
itemBuilder: (context, index) => Container(
color: Colors.white,
child: Text(
'ITEM $index',
textAlign: TextAlign.center,
),
))
],
));
It depends on how you want to lay your widgets out.
If you want to keep the ads persistent (not to scroll away with list) then keep the layout like :
Scaffold(
body: Column(
children: [
CarouselSlider(),
Expanded(
child: ListView.builder(),
),
],
),
)
Using positioned widget inside stack you can easily position the widgets.
Maybe this will help you.
Stack(
children: [
Positioned(
top: 0,
bottom: 250,
left: 0,
right: 0,
child: ListView.builder(
shrinkWrap: true,
itemBuilder: (context, index) => Container(
color: Colors.white,
child: Text(
'ITEM $index',
textAlign: TextAlign.center,
),
)),
),
Positioned(
bottom: 8,
right: 0,
left: 0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: CarouselSlider(
items: imgList.map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.symmetric(horizontal: 5.0),
decoration: const BoxDecoration(color: Colors.amber),
child: GestureDetector(
child: Image.network(i, fit: BoxFit.fill),
onTap: () {
print("hey");
}));
},
);
}).toList(),
options: CarouselOptions(),
)),
),
],
)
I am writing a page in which there will be Istria events, which I could leaf through. The whole event looks the way I want it to. But the problem is that I want to add a header to this "History Event " container, in the center (which would remain in place when scrolling). I can't do it in any way, I will be grateful for your help
My Page:
My code:
Expanded(
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(border: Border.all(width: 2), borderRadius: BorderRadius.circular(25)),
child: Scrollbar(
child: new ListView(
shrinkWrap: true,
children: [
Container(
alignment: Alignment.bottomLeft,
child: FixedTimeline.tileBuilder(
theme: TimelineThemeData(
nodePosition: 0.23,
color: Colors.blueGrey,
indicatorTheme: IndicatorThemeData(
position: 2,
size: 20.0,
),
connectorTheme: ConnectorThemeData(
thickness: 2.5,
),
),
builder: TimelineTileBuilder.connectedFromStyle(
contentsAlign: ContentsAlign.basic,
oppositeContentsBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Text('21.09.16 \ 14:48'),
),
contentsBuilder: (context, index) => Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('история событий (тестовое событие)(тестовое событие)'),
),
),
connectorStyleBuilder: (context, index) => ConnectorStyle.solidLine,
indicatorStyleBuilder: (context, index) => IndicatorStyle.dot,
itemCount: 10,
),
)
),
],
)),
)
)
I want to do it like this
Positioned widget is what you are searching for.
https://api.flutter.dev/flutter/widgets/Positioned-class.html
I have a Staggered GridView that is as given below. In every item of the grid I'm trying to place an Icon in it's center, overlaying on top of the image. I tried using a Stack but the Icon seems displaced.
This is my code:
Scaffold(
body: Align(
alignment: Alignment.topCenter,
child: StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: 8,
itemBuilder: (BuildContext context, int index) {
return Container(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(6)),
child: Image.network(
'https://images.unsplash.com/photo-1534361960057-19889db9621e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
fit: BoxFit.fitHeight,
),
),
);
},
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 2 : 3),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
),
);
and this is what the result looks like:
And this is what I've been trying to achieve:
You used the correct widget Stack but maybe you missed something.
I wrapped the Container by Stack with fit: StackFit.expand, to fill all the space, and the Positioned will be in the center
So here the full code and it might help:
Scaffold(
body: Align(
alignment: Alignment.topCenter,
child: StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: 8,
itemBuilder: (BuildContext context, int index) {
return Stack(
fit: StackFit.expand,
children: [
Container(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(6)),
child: Image.network(
'https://images.unsplash.com/photo-1534361960057-19889db9621e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
fit: BoxFit.fitHeight,
),
),
),
Positioned(child: Icon(Icons.play_arrow))
],
);
},
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 2 : 3),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
),
)
Use the Stack widget with an alignment property of center.
child: Stack(
alignment: Alignment.center,
children: <Widget>[
//Image
//Icon
],
),
I tried to add a RaisedButton above the ListView. I used a Colum but I got an error. Can anybody tell me where my mistake is? Thanks in advance!
body: Column(
children: <Widget>[
RaisedButton(
child: Text("Test"),
onPressed: null,
),
ListView.builder(
itemCount: exercises.length,
itemBuilder: (context, i) {
return Container(
child: Text(
exercises[i]["text"],
),
);
},
),
],
),
Adding to #Viren answer, You should use Flexible instead of Expanded
body: Column(
children: <Widget>[
RaisedButton(
child: Text("Test"),
onPressed: null,
),
Flexible(
child: Container(
child: ListView.builder(
itemCount: 5,
itemBuilder: (context, i) {
return Container(
child: Text(
'jitesh',
),
);
},
),
),
)
],
),
Please find diff Flutter: Expanded vs Flexible
You need to wrap your listview with Expanded widget.
body: Column(
children: <Widget>[
RaisedButton(
child: Text("Test"),
onPressed: null,
),
Expanded( // added widget
child: ListView.builder(
itemCount: exercises.length,
itemBuilder: (context, i) {
return Container(
child: Text(
exercises[i]["text"],
),
);
},
),
],
),
)
In my Flutter project, I have a container with a fixed height. Inside that container I have a Listview.
Here's the code-
return new Scaffold(
appBar: AppBar(
title: Text("All Values"),
),
body: new Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
height: isLoading ? 50.0 : 0,
color: Colors.white70,
child: Center(
child: new CircularProgressIndicator(),
),
),
Expanded(
child: Container(
height: 350,
color: Colors.red,
alignment: Alignment.bottomLeft,
child:
new ListView.builder(
itemCount: data.length-8,
itemBuilder: (BuildContext cxtx, int index) {
return Padding(
padding: const EdgeInsets.fromLTRB(10, 0.0, 10, 0),
child: Container(
child: showCard(index, radius),
),
);
},
controller: _scrollController,
),
),),
],
),
resizeToAvoidBottomPadding: false,
);
The code outputs like below-
So, the problem is I want to align these items at bottom left of the container. I could have done that using reverse: true but I need the list items with the same sequence. So, I need suggestion how can I do that?
You need those items in a row or a column? Follow with a row possibility:
Try this:
return new Scaffold(
appBar: AppBar(
title: Text("All Values"),
),
body: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
if(isLoading)
Container(
height: 50.0 ,
color: Colors.white70,
child: Center(
child: new CircularProgressIndicator(),
),
),
Expanded(
child: Container(
height: 350,
color: Colors.red,
alignment: Alignment.bottomLeft,
child: new ListView.builder(
itemCount: data.length - 8,
itemBuilder: (BuildContext cxtx, int index) {
return Padding(
padding: const EdgeInsets.fromLTRB(10, 0.0, 10, 0),
child: Container(
child: Text('asdf'),
),
);
},
controller: _scrollController,
),
),
),
],
),
resizeToAvoidBottomPadding: false,
);
StoreConnector<_ViewModel, List<Message>>(
converter: (store) {
// check mark ,reverse data list
if (isReverse) return store.state.dialogList;
return store.state.dialogList.reversed.toList();
},
builder: (context, dialogs) {
// Add a callback when UI render after. then change it direction;
WidgetsBinding.instance.addPostFrameCallback((t) {
// check it's items could be scroll
bool newMark = _listViewController.position.maxScrollExtent > 0;
if (isReverse != newMark) { // need
isReverse = newMark; // rebuild listview
setState(() {});
}
});
return ListView.builder(
reverse: isReverse, // 反转列表，insert数据时，刷新到0，加载更多时，滚动偏移不变
controller: _listViewController,
itemBuilder: (context, index) => _bubbleItem(context, dialogs[index], index),
itemCount: dialogs.length,
);
},
)