#override
void initState()
{
super.initState();
_scrollController = ScrollController(initialScrollOffset: 0);
_scrollController.addListener((_scrollControllerInitiated));
}
void _scrollControllerInitiated()
{
_scrollController.jumpto(1000);
}
need to call _scrollControllerInitiated method after scroll controller attached
what _scrollController.addListener does is listen to any scroll event and call the registered callback function. If you wall the scroll to jump to a certain offSet after being attached to the ListView or any scrollable widget you should use WidgetsBinding.instance.addPostFrameCallback to register a callback function after the widgets have been built. Check the code below
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
_MyApp createState() => _MyApp();
}
class _MyApp extends State<MyApp> {
ScrollController _scrollController;
void _scrollControllerInitiated() {
_scrollController.animateTo(200,
duration: Duration(milliseconds: 500), curve: Curves.ease);
}
Widget _itemBuilder(BuildContext context, int index) {
return GestureDetector(
onTap: () => setState(() {
print("hello $index");
}),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 15),
child: Text("Box $index"),
),
);
}
void initState() {
super.initState();
_scrollController = ScrollController();
WidgetsBinding.instance.addPostFrameCallback((_) {
_scrollControllerInitiated();
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Scroll Test"),
),
body: ListView.builder(
itemBuilder: _itemBuilder,
itemCount: 200,
controller: _scrollController,
),
),
);
}
}
Try this.
void _scrollControllerInitiated() {
Future(() => _scrollController.jumpTo(1000));
}
Related
I am using Lottie Animation and want it to animate everytime I click on it , To this I am using GestureDetector However it only works the first time then for some reason it wont work again
Here is the code
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
void main() async {
runApp(const App());
}
class App extends StatefulWidget {
const App({super.key});
#override
State<App> createState() {
return _AppState();
}
}
class _AppState extends State<App> with SingleTickerProviderStateMixin {
late final AnimationController my_location_controller;
#override
void initState() {
// TODO: implement initState
super.initState();
my_location_controller =
AnimationController(vsync: this, duration: const Duration(seconds: 5));
}
#override
Widget build(BuildContext context) {
return MaterialApp(
color: Colors.lightBlue,
home: Scaffold(
backgroundColor: Colors.lightBlue,
body: Center(
child: SizedBox(
width: 300,
height: 300,
child: GestureDetector(
onTap: () {
my_location_controller.forward();
},
child: Lottie.asset(
'assets/my_location.json',
controller: my_location_controller,
animate: true,
repeat: true,
),
),
),
),
),
);
}
}
#Ante Bule thnx, will accept your answer and this seems to work too ..
child: GestureDetector(
onTap: () {
my_location_controller.reset();
my_location_controller.forward();
},
child: Lottie.asset(
'assets/my_location.json',
controller: my_location_controller,
),
Add a listener to reset your animation when it gets completed, like this:
#override
void initState() {
super.initState();
my_location_controller =
AnimationController(vsync: this, duration: const Duration(seconds: 5));
my_location_controller.addStatusListener((status) {
if (status == AnimationStatus.completed) {
my_location_controller.reset();
}
});
}
any tips or help how can I make this on tap moveable list in flutter?
https://files.fm/f/txdn29dg3
The provided component is exactly what CupertinoPicker could offer you.
Also, as suggested in the documentation, you should combine the CupertinoPicker with showCupertinoModalPopup to display the picker modally at the bottom of the screen.
This is how the code could look like:
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: const Scaffold(
body: Center(
child: PickerPage(),
),
),
);
}
}
class PickerPage extends StatefulWidget {
const PickerPage();
#override
_PickerPageState createState() => _PickerPageState();
}
class _PickerPageState extends State<PickerPage> {
final _items = [
'Flat Rate',
'Hourly',
'Request for Price',
];
int _selectedItem = 0;
void _onSelectedItemChanged(int value) => setState(
() => _selectedItem = value,
);
void _showPicker() {
showCupertinoModalPopup(
context: context,
builder: (_) => PickerExample(
items: _items,
selectedItem: _selectedItem,
onSelectedItemChanged: _onSelectedItemChanged,
),
);
}
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(_items[_selectedItem]),
const SizedBox(height: 10.0),
ElevatedButton(
child: const Text('Show picker'),
onPressed: _showPicker,
),
],
);
}
}
class PickerExample extends StatefulWidget {
final List<String> items;
final int selectedItem;
final ValueSetter<int> onSelectedItemChanged;
const PickerExample({
required this.items,
required this.selectedItem,
required this.onSelectedItemChanged,
});
#override
_PickerExampleState createState() => _PickerExampleState();
}
class _PickerExampleState extends State<PickerExample> {
late final FixedExtentScrollController _controller;
#override
void initState() {
super.initState();
_controller = FixedExtentScrollController(initialItem: widget.selectedItem);
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return SizedBox(
height: 300,
child: CupertinoPicker(
scrollController: _controller,
backgroundColor: Colors.white,
itemExtent: 30.0,
children: [
for (final item in widget.items) Center(child: Text(item)),
],
onSelectedItemChanged: widget.onSelectedItemChanged,
),
);
}
}
You could also find an interactive example in this DartPad.
Upon viewing each page in a horizontal PageView.builder I'd like to call a vertical PageView.builder to supply each page with its own vertical list of replies. What's the best way to do this?
class StageBuilder extends StatelessWidget {
final List<SpeakContent> speakcrafts;
StageBuilder(this.speakcrafts);
final PageController controller = PageController(initialPage: 0);
#override
Widget build(context) {
return PageView.builder(
controller: controller,
itemCount: speakcrafts.length,
itemBuilder: (context, int currentIndex) {
return createViewItem(speakcrafts[currentIndex], context, currentIndex);
},
);
}
Widget createViewItem(SpeakContent speakcraft, BuildContext context, int currentIndex) {
return Scaffold(
body: (some stuff),
);
}
}
The problem is that you are putting a scaffold inside your PageView when it should be otherwise. See the example below:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 50, horizontal: 20),
child: PageViewDemo(),
),
),
);
}
}
class PageViewDemo extends StatefulWidget {
#override
_PageViewDemoState createState() => _PageViewDemoState();
}
class _PageViewDemoState extends State<PageViewDemo> {
PageController _controller = PageController(
initialPage: 0,
);
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return PageView(
controller: _controller,
children: [
MyPage1Widget(),
MyPage2Widget(),
MyPage3Widget(),
],
);
}
}
My app showing an empty space for listview builder if app bar is null and no space if we add appbar. Why it is showing space here? and How to solve this issue?
I tried to set margin as -MediaQuery.of(context).padding.toptop padding height but it also make error app not worked. How to set - value for margin i am android java developer for this types of issue i was solving by added -MediaQuery.of(context).padding.top margin
class BizCart extends StatefulWidget {
#override
_BizCartState createState() => _BizCartState();
}
class _BizCartState extends State<BizCart> with SingleTickerProviderStateMixin {
AnimationController _controller;
#override
void initState() {
_controller = AnimationController(vsync: this);
super.initState();
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body:Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
GradientAppBar(),
Expanded(child:Container(
child:ListView.builder(
itemCount: 31,
itemBuilder: (context,index)
{
return CartItemCard();
})
), )
],
)
);
}
}
Code with out appBar
Code with appBar
try this,
class BizCart extends StatefulWidget {
#override
_BizCartState createState() => _BizCartState();
}
class _BizCartState extends State<BizCart> with SingleTickerProviderStateMixin {
AnimationController _controller;
#override
void initState() {
_controller = AnimationController(vsync: this);
super.initState();
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: GradientAppBar(
gradient: LinearGradient(colors: [Colors.red, Colors.blue]),
),
body: ListView.builder(
itemCount: 31,
itemBuilder: (context, index) {
return CartItemCard();
},
),
);
}
}
MediaQuery.removePadding(
removeTop: true,
context: context, child: ListView.builder(
itemCount: 31,
itemBuilder: (context,index)
{
return CartItemCard();
}))
), )
Flutter removePadding
I have 3 tabs and each tab has a PageView inside.
At the end of the PageView, I want to be able to scroll to the next tab.
Is there a way I can do TabBar scroll instead of PageView scroll if there's no more page to the direction? (only left or right scroll)
Here's the sample code.
When I scroll to right at the last page of the 1st tab, I want to see the first page of the 2nd tab.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(home: ScrollableTabsDemo());
}
}
class _Page {
const _Page({ this.icon, this.text });
final IconData icon;
final String text;
}
const List<_Page> _allPages = <_Page>[
_Page(icon: Icons.grade, text: 'TRIUMPH'),
_Page(icon: Icons.playlist_add, text: 'NOTE'),
_Page(icon: Icons.check_circle, text: 'SUCCESS'),
];
class ScrollableTabsDemo extends StatefulWidget {
static const String routeName = '/material/scrollable-tabs';
#override
ScrollableTabsDemoState createState() => ScrollableTabsDemoState();
}
class ScrollableTabsDemoState extends State<ScrollableTabsDemo> with SingleTickerProviderStateMixin {
TabController _controller;
#override
void initState() {
super.initState();
_controller = TabController(vsync: this, length: _allPages.length);
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
final Color iconColor = Theme.of(context).accentColor;
return Scaffold(
appBar: AppBar(
title: const Text('Scrollable tabs'),
bottom: TabBar(
controller: _controller,
isScrollable: true,
tabs: _allPages.map<Tab>((_Page page) {
return Tab(text: page.text, icon: Icon(page.icon));
}).toList(),
),
),
body: TabBarView(
controller: _controller,
children: _allPages.map<Widget>((_Page page) {
return SafeArea(
top: false,
bottom: false,
child: PageView.builder(
itemBuilder: (context, position)
{
return Container(child: Center(child: Text(position.toString())));
},
itemCount: 5,
),
);
}).toList(),
),
);
}
}
Add to the pageBuilder the onPageChange param. Then check if its the last page, if so, animate the tabController to the nextPage.
onPageChanged: (page) {
if (page == _allPages.length &&
(_controller.index + 1) < _controller.length) {
_controller.animateTo(_controller.index + 1);
}
},
itemCount: _allPages.length + 1,