How to cut list in flutter application? - flutter

Question

I want to make a note app but I faced a problem.When I dont scroll my list it looks great(for me ) but when I scroll it green background moving to the top of application and I want to cut it and make fixed size.I also want make this list more custom,make a bigger margin between elements and change form to the rounded rectangle
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Positioned(
top: 0.0,
child: Row(
children: <Widget>[
Container(
child: Text(
"Notes",
style: TextStyle(
color: Color.fromRGBO(107, 119, 141, 1),
fontSize: 72,
),
),
),
Container(
margin: EdgeInsets.only(top: 50),
child: Text(
"Never Settle",
style: TextStyle(
fontSize: 12,
color: Color.fromRGBO(107, 119, 141, 0.25),
),
),
),
SizedBox(width: 20),
Container(
child: Image.asset(
'assets/images/magnifier.png',
height: 44,
width: 44,
),
),
SizedBox(width: 30),
Container(
child: Image.asset(
'assets/images/3dot.png',
height: 44,
width: 44,
),
),
],
),
),
Positioned(
top: 75.0,
child: ListView.builder(
itemCount: dList.length,
itemBuilder: (context, index) {
return Ink(
color: Colors.green,
child: ListTile(
title: Text(
dList[index],
style: TextStyle(
fontSize: 25,
),
),
)
);
},
),
),
Positioned(
height: 55,
width: 55,
// top:0.0,
right: 20.0,
bottom: 20.0,
child: Image.asset(
'assets/images/plus.png',
height: 22,
width: 22,
),
),
],
),
),
);
}
}
enter image description hereenter image description here

Answer 1

So I think this happens to you becouse you are using Stack widget. It looks nice, until you move list, becouse in fact it is floating over your top bar.
What I suggest you to do is using Scaffold and Column, here is your modified code:
Scaffold(
body: Container(
color: Colors.blue,
child: Column(
children: <Widget>[
SizedBox(height: 50),
Container(
color: Colors.indigo,
child: Row(
children: <Widget>[
Container(
child: Text(
"Notes",
style: TextStyle(
color: Color.fromRGBO(107, 119, 141, 1),
fontSize: 72,
),
),
),
Container(
margin: EdgeInsets.only(top: 50),
child: Text(
"Never Settle",
style: TextStyle(
fontSize: 12,
color: Color.fromRGBO(107, 119, 141, 0.25),
),
),
),
SizedBox(width: 20),
Container(
child: Icon(Icons.search, size: 40, color: Colors.red),
),
SizedBox(width: 30),
Container(
child: Icon(Icons.menu, size: 40, color: Colors.red),
),
],
),
),
Expanded(
child: Container(
color: Colors.green,
child: ListView.separated(
separatorBuilder: (BuildContext context, int index) =>
const Divider(),
itemCount: dList.length,
itemBuilder: (context, index) {
return Ink(
color: Colors.green,
child: ListTile(
title: Text(
dList[index],
style: TextStyle(
fontSize: 25,
),
),
));
},
),
),
),
],
),
),
floatingActionButton:
FloatingActionButton(onPressed: () => {}, child: Icon(Icons.add)),
)
And how it looks like:
What scaffold does is providing you perfect material design layout structure, it also wraps your code with Material, so you can use its benefits.
Scaffold also gives you opportunity to set your FloatingActionButton, you can find it on the bottom of the code, look how easy it's done, you don't need to create your own round button - it's already provided.
Read more about Scaffold
Another tip for you is using Icon() instead of importing your own images, three reasons for that:
It's super easy to do, you just write Icon(Icons.search), and it's done
Icons are scallable and modifable, you can change size, color
They support Material design
If you wrap Icon with IconButton, you can instantly get a beutiful button with tapping animation.
Read more about Icon and IconButton
List of Icons
If you want to make customized list tiles try this as your ListViews itemBuilder:
return Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 8),
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black38.withOpacity(0.2)),
borderRadius:
BorderRadius.all(Radius.circular(20))),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
dList[index],
style: TextStyle(
fontSize: 25,
),
),
),
),
);
Result:
If you wrap something with Container it will get inside of its body, then you can decorate this container with rounded borders, color, borders and more.
Read more about Container
Last tip for you is using ListView.separated instead of ListViev.builder if you want to easly get a separator between your tiles.
Try to adjust code for you and good luck, if you have any questions feel free to ask.

Answer 2

Set background color to green ins scaffold and set transparent color to link then try