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
Related
I am using a NestedScrollView with a SliverAppBar and a TabBar. The scrolling works well when scrolling down scrollable content like ListView or SingleChildScrollView, but whenever I try to scroll up and get the SliverAppBar to overgrow, nothing happens.
In the SliverPersistentHeaderDelegate of the SliverAppBar I am overwriting the following method like so:
#override
OverScrollHeaderStretchConfiguration get stretchConfiguration =>
OverScrollHeaderStretchConfiguration();
This is the class of the screen I am talking about:
class ProfileScreen extends ConsumerStatefulWidget {
const ProfileScreen({
super.key,
required this.userId
});
final String userId;
#override
ConsumerState<ProfileScreen> createState() => _ProfileScreenState();
}
class _ProfileScreenState extends ConsumerState<ProfileScreen> with
TickerProviderStateMixin {
late final TabController tabController;
#override
void initState() {
super.initState();
tabController = TabController(length: 3, vsync: this);
}
#override
void dispose() {
tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
final AsyncValue<List<BasicEventModel>> eventsAsync =
ref.watch(profileEventsProvider(widget.userId));
return AnnotatedRegion<SystemUiOverlayStyle>(
value: Themes.systemUiOverlayStyle(context),
child: Scaffold(
backgroundColor: Themes.color(context, light: Palette.white, dark:
Palette.gray900),
body: ExtendedNestedScrollView(
pinnedHeaderSliverHeightBuilder: () => topPadding + kToolbarHeight,
headerSliverBuilder: (context, innerBoxIsScrolled) => [
ProfileAppBar()
],
body: Column(
children: [
ProfileTabBar(controller: tabController),
Expanded(
child: TabBarView(
controller: tabController,
children: [
eventsAsync.when(
data: (List<BasicEventModel> events) =>
ProfileEventsList(events: events),
error: (Object e, StackTrace s) =>
_eventsText('profile_events_error'.tr()),
loading: () => const ProfileEventsShimmer()
),
// other Widgets for the other tabs
]
)
)
]
)
)
)
);
}
}
I'm trying to animate a container in a FutureBuilder widget which makes a request to a node js api on localhost. There seems to have no issues with the API, but I've noticed that the Container renders normally when I don't call controller.repeat(). i'm guessing that controller.repeat() doesn't work well asynchronously, but I haven't found any alternatives.
This is the code I've got so far:
class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
void initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 3000), vsync: this);
animation = Tween<double>(begin: 10, end: 300).animate(controller);
animation.addListener(() {
setState(() {});
});
}
void dispose() {
controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
final url = Uri.parse("http://localhost:8080");
return FutureBuilder(
future: http.get(url),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
final themeList =
Map<String, dynamic>.from(jsonDecode(snapshot.data.body));
final keys = List.from(themeList.keys);
controller.repeat(); // Container shows when I comment this line out
return Center(
child: Container(
color: Colors.red,
width: animation.value,
height: animation.value,
),
);
} else {
return Center(child: CircularProgressIndicator());
}
});
}
}
Please separate your animated widget. In your code, every setState(...) call will re-request the http.get(...).
Do something like this...
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: const Scaffold(
body: Center(
child: Home(),
),
),
);
}
}
class Home extends StatelessWidget {
const Home();
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: Future<void>.delayed(const Duration(seconds: 2), () {}),
builder: (context, snapshot) =>
snapshot.connectionState == ConnectionState.done
? const Center(child: AnimatedContainer())
: const Center(child: CircularProgressIndicator()),
);
}
}
class AnimatedContainer extends StatefulWidget {
const AnimatedContainer();
#override
_AnimatedContainer createState() => _AnimatedContainer();
}
class _AnimatedContainer extends State<AnimatedContainer>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
#override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 3000),
vsync: this,
);
_animation = Tween<double>(begin: 10, end: 300).animate(_controller);
_animation.addListener(() {
setState(() {});
});
// _controller.repeat();
_controller.forward();
}
#override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
width: _animation.value,
height: _animation.value,
);
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
}
#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));
}
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(),
],
);
}
}
i am trying to create material native tabs so when we scroll through the page, appbar collapses but the tabbar should be visible always and I implemented this using NestedScrollView in flutter
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
}
#override
void dispose() {
super.dispose();
_tabController.dispose();
}
#override
Widget build(BuildContext context) {
return NestedScrollView(
headerSliverBuilder: (BuildContext context, bool isBoxScrolled) {
return [
SliverAppBar(
title: Text("Scroller title"),
forceElevated: isBoxScrolled,
pinned: true,
floating: true,
bottom: TabBar(
tabs: [Tab(text: "tab1"), Tab(text: "tab2")],
controller: _tabController))
];
},
body: TabBarView(
children: [Page1(), Page1()],
controller: _tabController,
));
}
}
class Page1 extends StatefulWidget {
#override
_Page1State createState() => _Page1State();
}
class _Page1State extends State<Page1> {
ScrollController _controller;
void _scrollListener(){
if(_controller.offset >= _controller.position.maxScrollExtent && !_controller.position.outOfRange){
print("reached the bottom");
}
}
#override
void initState() {
super.initState();
_controller = ScrollController();
_controller.addListener(_scrollListener);
}
#override
Widget build(BuildContext context) {
return ListView(
controller: _controller,
children: <Widget>[Text("data"), SizedBox(height: 2000.0)],
);
}
}
but when I tried to use scrollController inside one of my tabBarview widget it disconnects contact with appbar and scroll individually.
the solution is the PrimaryScrollController
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
}
#override
void dispose() {
super.dispose();
_tabController.dispose();
}
#override
Widget build(BuildContext context) {
return NestedScrollView(
headerSliverBuilder: (BuildContext context, bool isBoxScrolled) {
return [
SliverAppBar(
title: Text("Scroller title"),
forceElevated: isBoxScrolled,
pinned: true,
floating: true,
bottom: TabBar(
tabs: [Tab(text: "tab1"), Tab(text: "tab2")],
controller: _tabController))
];
},
body: Builder(
builder: (BuildContext context) {
final innerScrollController = PrimaryScrollController.of(context);
// Use the innerScrollController to listen to the scrolling.
// This would be your controller for list. You can listen to this controller to know whether the list has reached maxScrollExtent and fetch data from API.
return TabBarView(
children: [
Page1(innerScrollController),
Page1(innerScrollController)
],
controller: _tabController,
);
},
),
);
}
}
class Page1 extends StatefulWidget {
final ScrollController _PrimaryScrollController;
Page1(this._PrimaryScrollController);
#override
_Page1State createState() => _Page1State();
}
class _Page1State extends State<Page1> {
void _scrollListener(){
if(this.widget._PrimaryScrollController.offset >= this.widget._PrimaryScrollController.position.maxScrollExtent && !this.widget._PrimaryScrollController.position.outOfRange){
print("reached the bottom");
}
}
#override
void initState() {
super.initState();
this.widget._PrimaryScrollController.addListener(_scrollListener);
}
#override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[Text("data"), SizedBox(height: 2000.0)],
);
}
}