Mixing
Flutter's carousel weird behavior
I need a carousel of widgets which will contain some text and an image per widget plus dot navigation should be shown at the bottom. Plus there should be space between the carousel and dot navigation as I need to add few content and button which will be fixed between the carousel and dot navigation. So I have used Column widget and created two containers one for carousel and other for dot navigation.
Now the issue is when I use below code to change carousel after 5sec I get a weird behavior of dot navigation. The widget change from 1st to 2nd after 5sec the dot navigation goes like this 1 -> 2 -> 1 -> 2. I don't understand why it goes back to 1st dot and comes to 2nd again. This works fine on finger swipe gesture. I need a solution for this weird behavior.
Timer.periodic(new Duration(seconds: 5), (_) {
_controller.animateTo(
_controller.index == _controller.length - 1
? 0
: _controller.index++);
});
Here is the code.
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with TickerProviderStateMixin{
TabController _controller;
Timer _time;
@override
void initState() {
_controller = TabController(length: 5, vsync: this);
_time = Timer.periodic(new Duration(seconds: 5), (_) {
_controller.animateTo(
_controller.index == _controller.length - 1
? 0
: _controller.index++);
});
super.initState();
}
@override
void dispose() {
_controller.dispose();
_time.cancel();
super.dispose();
}
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: <Widget>[
Container(
color: Colors.red, height:100.0, width:100.0,
child: DefaultTabController(
length: 5,
child: TabBarView(
controller: _controller,
children: <Widget>[
Container(color: Colors.red, height:100.0, width:100.0),
Container(color: Colors.blue, height:100.0, width:100.0),
Container(color: Colors.green, height:100.0, width:100.0),
Container(color: Colors.yellow, height:100.0, width:100.0),
Container(color: Colors.grey, height:100.0, width:100.0),
],
),
),
),
Container(
child: TabPageSelector(
controller: _controller,
selectedColor: Colors.grey,
color: Colors.white,
),
)
]
)
),
);
}
}
flutter asked Nov 9 '18 at 19:42
Vishal DhudumVishal Dhudum
156
add a comment |
I need a carousel of widgets which will contain some text and an image per widget plus dot navigation should be shown at the bottom. Plus there should be space between the carousel and dot navigation as I need to add few content and button which will be fixed between the carousel and dot navigation. So I have used Column widget and created two containers one for carousel and other for dot navigation.
Now the issue is when I use below code to change carousel after 5sec I get a weird behavior of dot navigation. The widget change from 1st to 2nd after 5sec the dot navigation goes like this 1 -> 2 -> 1 -> 2. I don't understand why it goes back to 1st dot and comes to 2nd again. This works fine on finger swipe gesture. I need a solution for this weird behavior.
Timer.periodic(new Duration(seconds: 5), (_) {
_controller.animateTo(
_controller.index == _controller.length - 1
? 0
: _controller.index++);
});
Here is the code.
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with TickerProviderStateMixin{
TabController _controller;
Timer _time;
@override
void initState() {
_controller = TabController(length: 5, vsync: this);
_time = Timer.periodic(new Duration(seconds: 5), (_) {
_controller.animateTo(
_controller.index == _controller.length - 1
? 0
: _controller.index++);
});
super.initState();
}
@override
void dispose() {
_controller.dispose();
_time.cancel();
super.dispose();
}
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: <Widget>[
Container(
color: Colors.red, height:100.0, width:100.0,
child: DefaultTabController(
length: 5,
child: TabBarView(
controller: _controller,
children: <Widget>[
Container(color: Colors.red, height:100.0, width:100.0),
Container(color: Colors.blue, height:100.0, width:100.0),
Container(color: Colors.green, height:100.0, width:100.0),
Container(color: Colors.yellow, height:100.0, width:100.0),
Container(color: Colors.grey, height:100.0, width:100.0),
],
),
),
),
Container(
child: TabPageSelector(
controller: _controller,
selectedColor: Colors.grey,
color: Colors.white,
),
)
]
)
),
);
}
}
asked Nov 9 '18 at 19:42
Vishal DhudumVishal Dhudum
156
add a comment |
I need a carousel of widgets which will contain some text and an image per widget plus dot navigation should be shown at the bottom. Plus there should be space between the carousel and dot navigation as I need to add few content and button which will be fixed between the carousel and dot navigation. So I have used Column widget and created two containers one for carousel and other for dot navigation.
Now the issue is when I use below code to change carousel after 5sec I get a weird behavior of dot navigation. The widget change from 1st to 2nd after 5sec the dot navigation goes like this 1 -> 2 -> 1 -> 2. I don't understand why it goes back to 1st dot and comes to 2nd again. This works fine on finger swipe gesture. I need a solution for this weird behavior.
Timer.periodic(new Duration(seconds: 5), (_) {
_controller.animateTo(
_controller.index == _controller.length - 1
? 0
: _controller.index++);
});
Here is the code.
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with TickerProviderStateMixin{
TabController _controller;
Timer _time;
@override
void initState() {
_controller = TabController(length: 5, vsync: this);
_time = Timer.periodic(new Duration(seconds: 5), (_) {
_controller.animateTo(
_controller.index == _controller.length - 1
? 0
: _controller.index++);
});
super.initState();
}
@override
void dispose() {
_controller.dispose();
_time.cancel();
super.dispose();
}
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: <Widget>[
Container(
color: Colors.red, height:100.0, width:100.0,
child: DefaultTabController(
length: 5,
child: TabBarView(
controller: _controller,
children: <Widget>[
Container(color: Colors.red, height:100.0, width:100.0),
Container(color: Colors.blue, height:100.0, width:100.0),
Container(color: Colors.green, height:100.0, width:100.0),
Container(color: Colors.yellow, height:100.0, width:100.0),
Container(color: Colors.grey, height:100.0, width:100.0),
],
),
),
),
Container(
child: TabPageSelector(
controller: _controller,
selectedColor: Colors.grey,
color: Colors.white,
),
)
]
)
),
);
}
}
asked Nov 9 '18 at 19:42
Vishal DhudumVishal Dhudum
156
I need a carousel of widgets which will contain some text and an image per widget plus dot navigation should be shown at the bottom. Plus there should be space between the carousel and dot navigation as I need to add few content and button which will be fixed between the carousel and dot navigation. So I have used Column widget and created two containers one for carousel and other for dot navigation.
Now the issue is when I use below code to change carousel after 5sec I get a weird behavior of dot navigation. The widget change from 1st to 2nd after 5sec the dot navigation goes like this 1 -> 2 -> 1 -> 2. I don't understand why it goes back to 1st dot and comes to 2nd again. This works fine on finger swipe gesture. I need a solution for this weird behavior.
Timer.periodic(new Duration(seconds: 5), (_) {
_controller.animateTo(
_controller.index == _controller.length - 1
? 0
: _controller.index++);
});
Here is the code.
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with TickerProviderStateMixin{
TabController _controller;
Timer _time;
@override
void initState() {
_controller = TabController(length: 5, vsync: this);
_time = Timer.periodic(new Duration(seconds: 5), (_) {
_controller.animateTo(
_controller.index == _controller.length - 1
? 0
: _controller.index++);
});
super.initState();
}
@override
void dispose() {
_controller.dispose();
_time.cancel();
super.dispose();
}
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: <Widget>[
Container(
color: Colors.red, height:100.0, width:100.0,
child: DefaultTabController(
length: 5,
child: TabBarView(
controller: _controller,
children: <Widget>[
Container(color: Colors.red, height:100.0, width:100.0),
Container(color: Colors.blue, height:100.0, width:100.0),
Container(color: Colors.green, height:100.0, width:100.0),
Container(color: Colors.yellow, height:100.0, width:100.0),
Container(color: Colors.grey, height:100.0, width:100.0),
],
),
),
),
Container(
child: TabPageSelector(
controller: _controller,
selectedColor: Colors.grey,
color: Colors.white,
),
)
]
)
),
);
}
}
asked Nov 9 '18 at 19:42
Vishal DhudumVishal Dhudum
156
asked Nov 9 '18 at 19:42
Vishal DhudumVishal Dhudum
156
edited Nov 21 '18 at 4:54
Vishal Dhudum
asked Nov 9 '18 at 19:42
Vishal DhudumVishal Dhudum
156
asked Nov 9 '18 at 19:42
Vishal DhudumVishal Dhudum
156
asked Nov 9 '18 at 19:42
Vishal DhudumVishal Dhudum
156
156
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I ran your code but excluded the timer and it worked as it's supposed to, so the problem probably lies in your timer.
It could be that you tell the program to add one frame (: _controller.index++);) and the next time it runs, you tell it to go back one frame ( _controller.length - 1 ? 0).
Now I'm not an expert on this, so don't take my word for granted, but maybe worth a try.
Good luck
answered Dec 30 '18 at 15:02
J.WJ.W
166
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53232306%2fflutters-carousel-weird-behavior%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I ran your code but excluded the timer and it worked as it's supposed to, so the problem probably lies in your timer.
It could be that you tell the program to add one frame (: _controller.index++);) and the next time it runs, you tell it to go back one frame ( _controller.length - 1 ? 0).
Now I'm not an expert on this, so don't take my word for granted, but maybe worth a try.
Good luck
answered Dec 30 '18 at 15:02
J.WJ.W
166
add a comment |
I ran your code but excluded the timer and it worked as it's supposed to, so the problem probably lies in your timer.
It could be that you tell the program to add one frame (: _controller.index++);) and the next time it runs, you tell it to go back one frame ( _controller.length - 1 ? 0).
Now I'm not an expert on this, so don't take my word for granted, but maybe worth a try.
Good luck
answered Dec 30 '18 at 15:02
J.WJ.W
166
add a comment |
I ran your code but excluded the timer and it worked as it's supposed to, so the problem probably lies in your timer.
It could be that you tell the program to add one frame (: _controller.index++);) and the next time it runs, you tell it to go back one frame ( _controller.length - 1 ? 0).
Now I'm not an expert on this, so don't take my word for granted, but maybe worth a try.
Good luck
answered Dec 30 '18 at 15:02
J.WJ.W
166
I ran your code but excluded the timer and it worked as it's supposed to, so the problem probably lies in your timer.
It could be that you tell the program to add one frame (: _controller.index++);) and the next time it runs, you tell it to go back one frame ( _controller.length - 1 ? 0).
Now I'm not an expert on this, so don't take my word for granted, but maybe worth a try.
Good luck
answered Dec 30 '18 at 15:02
J.WJ.W
166
answered Dec 30 '18 at 15:02
J.WJ.W
166
answered Dec 30 '18 at 15:02
J.WJ.W
166
answered Dec 30 '18 at 15:02
J.WJ.W
166
166
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53232306%2fflutters-carousel-weird-behavior%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
