Related
To explain what I want I have created a simple demo file
Here I have 4 container,
What I want is, when I scroll up ,all three container( RED, GREEN and listview) should be scrolled up and when listview reach at top (below welcome container) its scrolling should be start...
class HomeScreen extends StatelessWidget {
HomeScreen({Key? key}) : super(key: key);
List<String> mydata = [];
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
//this welcome container should be fixed at top
Container(height: 50, child: Center(child: Text('Welcome'))),
Container(
height: 100,
color: Colors.red,
),
Container(
height: 200,
color: Colors.green,
),
Expanded(
child: ListView.builder(
itemCount: mydata.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(mydata[index]),
leading: CircleAvatar(),
);
}))
],
),
),
);
}
}
You can increase the itemCount by two.
body: SafeArea(
child: Column(
children: [
Container(height: 50, child: Center(child: Text('Welcome'))),
Expanded(
child: ListView.builder(
itemCount: mydata.length + 2,
itemBuilder: (context, index) {
if (index == 0) {
return Container(
height: 100,
color: Colors.red,
);
}
if (index == 1) { // you can just merge it with if like `index<2`, then use condition
return Container(
height: 200,
color: Colors.green,
);
}
return ListTile(
title: Text(mydata[index - 2]),
leading: CircleAvatar(),
);
}))
],
),
),
Also I will suggest you to check CustomScrolView.
When I use Transform.rotate to make a horizontal ListView diagonal as shown below, it becomes diagonal, but the left and right edges are cut off.
Is there a way to display without clipping the left and right edges, or is there a widget that can be used for that?
I came up with a way to use the Stack widget to overlay the left and right edges with strips of gradation and make them invisible.
I've actually tried it and it's fine, but I thought I'd ask if there is another way.
I think this is happening because the screen width is passed from the parent as a constraint, but is there any way to disable the constraint?
Thank you.
import 'package:flutter/material.dart';
import 'dart:math' as math;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animated Icons',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.greenAccent,
body: Column(
children: [
Expanded(
child: Center(
child: SizedBox(
width: double.infinity,
height: 200.0,
child: Transform.rotate(
angle: -math.pi / 20,
child: Container(
color: Colors.white,
height: 200.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 6,
itemBuilder: (context, innerIndex) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
//padding: EdgeInsets.all(4.0),
height: 50.0,
width: 200.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color:
Colors.red.withOpacity(1.0 - 0.1 * innerIndex),
),
child:Center(child:Text(innerIndex.toString()),),
),
),
),
),
),
),
),
),
Container(
height:100.0,
color: Colors.white,
child:Center(
child:Text('title'),
),
)
],
),
);
}
}
With the following code using OverflowBox, the left and right corners are no longer cut off.
Expanded(
child: Center(
child: OverflowBox(
maxWidth: MediaQuery.of(context).size.width*1.2,
child: Transform.rotate(
angle: -math.pi / 20,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.white,
),
height: 200.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 6,
itemBuilder: (context, innerIndex) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
//padding: EdgeInsets.all(4.0),
height: 50.0,
width: 200.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color:
Colors.red.withOpacity(1.0 - 0.1 * innerIndex),
),
child:Center(child:Text(innerIndex.toString()),),
),
),
),
),
),
),
),
),
#override
Widget build(BuildContext context) {
return Column(
children: [
Text(
"Scrolling Viewww :( ",
style: TextStyle(fontSize: 25),
),
Column(
children: [
Container(
height: 100,
width: 100,
color: Colors.blue,
),
SizedBox(
height: 10,
),
Container(
height: 100,
width: 100,
color: Colors.blue,
),
SizedBox(
height: 10,
),
Column(children: [
ListView( <------------------ **Making this Expanded**
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: [
Container(
height: 100,
width: 100,
color: Colors.red,
),
SizedBox(
height: 10,
),
Container(
height: 100,
width: 100,
color: Colors.red,
),
SizedBox(
height: 10,
),
Container(
height: 100,
width: 100,
color: Colors.red,
),
SizedBox(
height: 10,
),
Container(
height: 100,
width: 100,
color: Colors.red,
),
SizedBox(
height: 10,
),
],
),
]),
Container(
height: 100,
width: 100,
color: Colors.blue,
),
SizedBox(
height: 10,
),
],
)
],
);
I have tried to implement Expanded to resolved this. However, since it is nested twice, it was quite tricky. Only way that I could have done is just to set the Container() widget with given height.
But, in my real Column() widget, I have an AnimatedContainer that changes with its height. So, I want to find a way that I can do this with Expanded or Flexible.
I'd tried million different combinations. Nothing seems to work. How can I make the ListView that is inside the nested Column expandable?
Did you want to fix two item over ListView?
I implemented your request.
import 'package:flutter/material.dart';
import 'dart:math' as math;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: _buildBody(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Widget _buildBody() {
return SafeArea(
child: Container(
child: NestedScrollView(
headerSliverBuilder: (context, value) {
return [
SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
minHeight: 40,
maxHeight: 40,
child: Container(
color: Colors.white,
child: Text(
"Scrolling Viewww :( ",
style: TextStyle(fontSize: 25),
),
),
),
),
SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
minHeight: 90,
maxHeight: 90,
child: Container(
height: 100,
width: 100,
color: Colors.blue,
child: Text('box1'),
),
),
),
SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
minHeight: 90,
maxHeight: 90,
child: Container(
height: 100,
width: 100,
color: Colors.blue,
child: Text('box2'),
),
),
),
];
},
body: Builder(
builder: (BuildContext context) {
final innerScrollController = PrimaryScrollController.of(context);
return SingleChildScrollView(
controller: innerScrollController,
child: Column(
children: [
ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: [
Container(
height: 100,
width: 100,
color: Colors.red,
),
SizedBox(
height: 10,
),
Container(
height: 100,
width: 100,
color: Colors.red,
),
SizedBox(
height: 10,
),
Container(
height: 100,
width: 100,
color: Colors.red,
),
SizedBox(
height: 10,
),
Container(
height: 100,
width: 100,
color: Colors.red,
),
SizedBox(
height: 10,
),
Container(
height: 100,
width: 100,
color: Colors.red,
),
SizedBox(
height: 10,
),
],
),
Container(
height: 100,
width: 100,
color: Colors.blue,
),
SizedBox(
height: 10,
),
],
),
);
},
),
),
),
);
}
}
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
_SliverAppBarDelegate({
#required this.minHeight,
#required this.maxHeight,
#required this.child,
});
final double minHeight;
final double maxHeight;
final Widget child;
#override
double get minExtent => minHeight;
#override
double get maxExtent => math.max(maxHeight, minHeight);
#override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return SizedBox.expand(child: child);
}
#override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight ||
child != oldDelegate.child;
}
}
To avoid the bottom overflow, try wrapping a SingleChildScrollView around the first Column. Additionally you can play around with the mainAxisSize property of the different Columns.
In my app, i have used BlogTile and CategoryTile widgets (which were made by myself) and I am using them in Contaniers/Columns. When I used SingleChildScrollView with CategoryTile, and made axis as horizontal, it was working fine. But as soon as i use it for BlogTile, it doen't work. I am not able to scroll in my app vertically. But when i try to scroll vertically by clicking on the part between CategoryTile and BlogTile, it works. But when i try to scroll by clicking from anyb other section of it, it doesn't work. Please someone help me
Check this code -
import 'package:flutter/material.dart';
import 'package:news_app/helper/data.dart';
import 'package:news_app/helper/news.dart';
import 'package:news_app/models/article_model.dart';
import 'package:news_app/models/category_models.dart';
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
List<CategoryModel> categories = new List<CategoryModel>();
List<ArticleModel> articles = new List<ArticleModel>();
bool loading = true;
#override
void initState() {
// TODO: implement initState
super.initState();
categories = getCategories();
getNews();
}
getNews() async {
News newsClass = News();
await newsClass.getNews();
articles = newsClass.news;
setState(() {
loading = false;
print('Done');
});
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Flutter',
style: TextStyle(
color: Colors.black,
),
),
Text(
'News',
style: TextStyle(
color: Colors.blue,
),
),
],
),
//elevation: 2.0,
),
body: loading
? Center(
child: Container(
child: CircularProgressIndicator(),
),
)
: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(top: 10.0),
child: SingleChildScrollView(
child: Column(
children: <Widget>[
///Categories
Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
height: 70.0,
child: ListView.builder(
itemCount: categories.length,
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, index) {
return CategoryTile(
imageUrl: categories[index].imageUrl,
categoryName: categories[index].categoryName,
);
},
),
),
SizedBox(
height: 30.0,
),
///Blogs
SingleChildScrollView(
child: Container(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: articles.length,
itemBuilder: (context, index) {
return BlogTile(
imageUrl: articles[index].urlToImage,
title: articles[index].title,
desc: articles[index].description,
);
},
),
),
),
],
),
),
),
),
),
),
);
}
}
class CategoryTile extends StatelessWidget {
final imageUrl, categoryName;
CategoryTile({this.imageUrl, this.categoryName});
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {},
child: Container(
margin: EdgeInsets.only(right: 16.0),
child: Stack(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(6.0),
child: Image.network(
imageUrl,
width: 120.0,
height: 160.0,
fit: BoxFit.cover,
),
),
Container(
alignment: Alignment.center,
width: 120.0,
height: 160.0,
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(6.0)),
child: Text(
categoryName,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 14.0,
),
),
),
],
),
),
);
}
}
class BlogTile extends StatelessWidget {
final String imageUrl, title, desc;
BlogTile(
{#required this.imageUrl, #required this.desc, #required this.title});
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Image.network(imageUrl),
Text(title),
Text(desc),
],
),
);
}
}
I think the issue here is that you're giving unbounded height and width to some of the ScrollViews.
First off, don't use multiple scrolling widgets nested inside one another. But if you want to do that, try wrapping each of your scrollview within a Container like this:
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
height: 50.0,
width: 50.0,
child: SingleChildScrollView(
child: ...,
),
),
),
What I'd also suggest is that instead of using a SingleChildScrollView, use a ListView widget. It works almost the same and you can put multiple children inside it. A simple ListView() will work. Don't use ListView.builder or any other aggregate function.
I'm trying to create a horizontal list view with some card.
I want the list view to have height X and the cards to have height Y, I don't know why but the cards are getting the height of the list view.
This is what I have:
class FinanceApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Container(
color: Color(0x180000),
child: Column(
children: <Widget>[
Header(),
SizedBox(
height: 20,
),
Expanded(
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(32.0),
topRight: Radius.circular(32.0),
),
),
child: Column(
children: <Widget>[
Container(
height: 250,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
CustomCard(),
CustomCard(),
],
),
),
],
),
),
),
],
),
),
),
);
}
}
EDIT: The only thing that kinda works for me, Is to wrap the card container in another container, use padding to get the size I want, but it does not seem like a great solution.
Check this out:
import 'package:flutter/material.dart';
class StackOverFlow extends StatefulWidget {
#override
_StackOverFlowState createState() => _StackOverFlowState();
}
class _StackOverFlowState extends State<StackOverFlow> {
#override
Widget build(BuildContext context) {
return Scaffold(
body:
Center(
child: Container(
color: Colors.blue,
height: 200.0,
width: double.infinity,
child: ListView.builder(
physics: BouncingScrollPhysics(),
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.all(16.0),
itemCount: 100,
itemBuilder: _buildItem,
),
),
),
);
}
Widget _buildItem (BuildContext context, int index) {
return Center(
child: Card(
child: Text(index.toString()),
),
);
}
}
And for giving children same size consider wrapping the cards with a Container:
Widget _buildItem (BuildContext context, int index) {
return Center(
child: Container(
height: 100.0,
width: 100.0,
child: Card(
child: Center(child: Text(index.toString())),
),
),
);
}