Dynamically add string value in color property - flutter

I was wondering how the following situation can be done?
I have the following code:
List<String> arrColorList = ['blue', 'red', 'yellow'];
return Scaffold(
backgroundColor: Colors.white,
body: Container(
child: Center(
child: Container(
child: Center(
child: SingleChildScrollView(
child: Container(
child: Padding(
padding: const EdgeInsets.all(36.0),
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: arrColorList.length,
itemBuilder: (BuildContext context, int index) {
return new GestureDetector(
onTap: () {},
child: SizedBox(
width: 42.0,
height: 42.0,
child: const DecoratedBox(
decoration: const BoxDecoration(
color: const Color.fromRGBO(66, 165, 245, 1.0)
),
),
),
);
}),
),
),
),
),
),
),
)
);
}
What I want to achieve is to dynamically put the values of the arrColorList to the color property like this:
Colors.arrColorList[index] // Should end up in Colors.blue or Colors.red
But that is not valid. Any idea how I could solve this?


The getter 'arrColorList' isn't defined for the type 'Colors'.
Change color list type string to Color
List<Color> arrColorList = [Colors.blue, Colors.red, Colors.yellow];
Complete source code
Scaffold(
backgroundColor: Colors.white,
body: Container(
child: Center(
child: Container(
child: Center(
child: SingleChildScrollView(
child: Container(
child: Padding(
padding: const EdgeInsets.all(36.0),
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: arrColorList.length,
itemBuilder: (BuildContext context, int index) {
return new GestureDetector(
onTap: () {},
child: SizedBox(
width: 42.0,
height: 42.0,
child: DecoratedBox(
decoration: BoxDecoration(
color: arrColorList[index]),
),
),
);
}),
),
),
),
),
),
),
))


It's good to create a List of Color "List"
and fill it with what colors you want.
In your case you can do this:
List<Color> arrColorList = [
Colors.blue,
Colors.red,
Colors.yellow,
];
and then use it like this:
arrColorList[index]

Related

Listview is appearing behind top widgets when scaffold background colour is low shaded

I have noticed one issue while applying low shade colors to scaffold,
I have a Column that contains few widgets and expanded Listview,
while scrolling the listview upside, it is shown behind the top widgets of column
I have attached an image,
is there any solution to stop this behaviour of listview
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return SafeArea(
child: Scaffold(
backgroundColor: Colors.blue.shade50,
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
height: 100,
color: Colors.green,
child: Center(child: Text('Balance Card'),),
),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
height: 100,
color: Colors.red,
child: Center(child: Text('History Card'),),
),
),
Expanded(
child: ListView.builder(
itemCount: 100,
itemBuilder: (context,index){
return ListTile(
tileColor: Colors.white,
title: Text(index.toString()),
);
}),
),
],
),
),
);
}
Image:

Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return SafeArea(
child: Scaffold(
body: Column(
children: [
Container(
color: Colors.blue.shade50,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
height: 100,
color: Colors.green,
child: const Center(
child: Text('Balance Card'),
),
),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
height: 100,
color: Colors.red,
child: const Center(
child: Text('History Card'),
),
),
),
],
),
),
Expanded(
child: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
tileColor: Colors.white,
title: Text(index.toString()),
);
}),
),
],
),
),
);}
I guess you want a look like this.Can you check?

flutter add widgets top and bottom to list GridView.builder

Tell me how to add widgets to the top and bottom of this list using GridView.builder?
I've tried using Column as well, but it doesn't work the way I wanted. What other options are there?
Widget build(BuildContext context)
{
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Stack(
children: [
LayoutBuilder(
builder: (context, constraints) {
return GridView.builder(...);
}
),
Padding(child: TextField(...))
],
),
);
}

Try below code:
SingleChildScrollView(
padding: const EdgeInsets.all(10),
child: Column(
children: [
Container(
width: double.infinity,
height: 50,
color: Colors.blue,
child: const Text(
'Your Apper Widget',
textAlign: TextAlign.center,
),
),
GridView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 9,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemBuilder: (context, index) {
return const Card(
child: ListTile(
title: Text('userList'),
),
);
},
),
Container(
width: double.infinity,
height: 50,
color: Colors.red,
child: const Text(
'Your Lower Widget',
textAlign: TextAlign.center,
),
),
],
),
),

Try this code :
body: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
color: Colors.red,
height: 48.0,
),
Expanded(
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
itemBuilder: (_, index) => const FlutterLogo(),
itemCount: 20,
),
),
Container(
color: Colors.green,
height: 48.0,
)
],
),

Flutter: Incorrect use of ParentDataWidget

I'm trying to do a homepage where it will scrollable with 3 or 4 titles and a horizontal lists for products once i put the ListView.builder i get this error: Incorrect use of ParentDataWidget.
Can someone gives me the best solution of what I'm trying to do.
i already tried Expanded and Flexible for the ListView.builder nothing worked.
if i removed the Expanded the error will be: Horizontal viewport was given unbounded height.
My snippet code:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(
Icons.menu,
color: Colors.black,
size: 30,
),
),
title: Text("Home"),
actions: [
IconButton(
icon: Icon(
Icons.search,
color: Colors.black,
size: 30,
),
onPressed: () {},
),
],
),
body: (_isLoading)
? ListView(
children: [
SizedBox(
height: 10,
),
TitleSlider(title: 'Category'),
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(0),
itemCount: thisTwoCategories.length,
itemBuilder: (context, int index) {
return _buildCategoryThumbnail(
thisTwoCategories[index], index);
}),
)
],
)
: Center(
child: CircularProgressIndicator(),
),
);
}
Widget _buildCategoryThumbnail(Collection category, int index) {
return InkWell(
onTap: () {
_navigateToCollectionDetailScreen(
thisTwoCategories[index].id, thisTwoCategories[index].title);
},
child: Container(
alignment: Alignment.topCenter,
width: MediaQuery.of(context).size.width / 2.1,
height: displayHeight(context) * .10,
decoration: category.image.originalSource != null
? BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15)),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
category.image.originalSource,
)))
: BoxDecoration(),
child: Container(
width: MediaQuery.of(context).size.width,
alignment: Alignment.bottomCenter,
child: Text(
category.title,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),
),
),
),
);
}
i solved the issue Thanks guys!
SingleChildScrollView(
child: Container(
child: Column(
children: [
SizedBox(
height: 10,
),
TitleSlider(title: 'Category'),
Container(
height: 200,
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(0),
itemCount: thisTwoCategories.length,
itemBuilder: (context, int index) {
return _buildCategoryThumbnail(
thisTwoCategories[index], index);
}),
),
SizedBox(
height: 10,
),
TitleSlider(title: 'Category'),
Container(
height: 200,
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(0),
itemCount: thisTwoCategories.length,
itemBuilder: (context, int index) {
return _buildCategoryThumbnail(
thisTwoCategories[index], index);
}),
),
SizedBox(
height: 10,
),
TitleSlider(title: 'Category'),
Container(
height: 200,
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(0),
itemCount: thisTwoCategories.length,
itemBuilder: (context, int index) {
return _buildCategoryThumbnail(
thisTwoCategories[index], index);
}),
),

ListView must be a child of Expanded and Expanded has to be a child of Column.

Try below code
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(
Icons.menu,
color: Colors.black,
size: 30,
),
),
title: Text("Home"),
actions: [
IconButton(
icon: Icon(
Icons.search,
color: Colors.black,
size: 30,
),
onPressed: () {},
),
],
),
body: (_isLoading)
? Container(child:Column(
children: [
SizedBox(
height: 10,
),
TitleSlider(title: 'Category'),
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(0),
itemCount: thisTwoCategories.length,
itemBuilder: (context, int index) {
return _buildCategoryThumbnail(
thisTwoCategories[index], index);
}),
)
],
))
: Center(
child: CircularProgressIndicator(),
),
);

You cannot use Expanded as ListView's child. If you use something like below code, it'll be work. You need to give height or/and width when you use ListView.
Container(
width: something,
child: aWidget,
)

ListView should not be used inside Expanded or Flexible. Only row, column or flex is allowed.
A Container of fixed width/height or ConstrainedBox can be used
Ex:
ConstrainedBox(
constraints: BoxConstraints(minHeight: 50, maxHeight: 500),
child: ListView.builder(...),
)

To solve this problem you have to remove Expanded widget or Flex widget.

i need an horizontal and an vertical listView builder in the same page. horizontal at the top and vertical listview at the bottom

This is my code. i need an vertical listview at the top and an horizontal listview at the bottom. top listview shouldn't move with the bottom horizontal listview. My app freezes when i go to this page. i need to stop the main.dart and restart the app.i need a screen something like this. what should i do
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_ecommerce_app/common_widget/BottomNavBarWidget.dart';
import 'package:flutter_ecommerce_app/screens/ShoppingCartPage(p).dart';
class ExpanPrdCat extends StatefulWidget {
#override
_ExpanPrdCatState createState() => _ExpanPrdCatState();
}
class _ExpanPrdCatState extends State<ExpanPrdCat> {
bool isLoading = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
centerTitle: true,
title: Text('Vegetables'),
leading: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.arrow_back_ios_rounded),
),
actions: [
IconButton(
onPressed: () {},
icon: Icon(Icons.search),
color: Color(0xFF323232),
),
],
),
// bottomNavigationBar: BottomNavBarWidget(),
body: Container(
child: Column(children: [
Container(
height: 90,
child: Padding(
padding:
const EdgeInsets.only(top: 5, bottom: 5, left: 1, right: 1),
child: Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, index) {
return categoryItemsTabs(index);
},
itemCount: 5,
)),
),
),
Container(
child: ListView.builder(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
)
]),
),
);
}
//==================================================
categoryItemsTabs(int index) {
return Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 3),
height: 40,
width: 120,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/broccoli-in-a-pile-royalty-free-image-593310638-1564523257.jpg"),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.4), BlendMode.darken)),
borderRadius: BorderRadius.circular(15)),
),
Container(
alignment: Alignment.center,
child: Text(
"Organic",
style: TextStyle(
color: Colors.white, fontSize: 15, fontWeight: FontWeight.bold),
),
),
],
);
}
cartItems(int index) {
return Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey[300],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(
"https://economictimes.indiatimes.com/thumb/height-450,width-600,imgsize-111140,msid-72862126/potato-getty.jpg?from=mdr"),
fit: BoxFit.cover)),
),
Padding(
padding: const EdgeInsets.only(left: 15, top: 15),
child: Row(
children: [
Container(
width: 160,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"potato",
style: TextStyle(
fontSize: 25,
),
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 5,
),
Text(
"malayalam name",
style: TextStyle(fontSize: 20),
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 5,
),
Column(
children: [
Text("price"),
],
)
],
),
),
],
),
),
Row(
children: [
Column(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(05)),
height: 20,
child: DropdownButton<String>(
icon: Icon(Icons.keyboard_arrow_down),
underline: SizedBox(),
hint: Text("choose"),
items: ['1 Kg', '2Kg'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (_) {},
),
),
SizedBox(
height: 50,
),
Row(
children: [
Container(
height: 20,
width: 70,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.blue,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CartScreen()),
);
},
child: Text(
" Add",
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w800),
),
),
)
],
)
],
),
],
)
],
),
),
),
)
],
);
}
}

Just add physics: ClampingScrollPhysics(), in your ListView.builder properties.
Example:
Container(
child: ListView.builder(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
)

You can do it using SingleChildScrollView :
for horizontal scrolling
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [],
),
),
for vertical scrolling
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [],
),
),

return Scaffold(
appBar: AppBar(....),
body: Container(
child: Column(children: [
Container(
height: 90,
width: MediaQuery.of(context).size.width,
child: Padding(
padding:
const EdgeInsets.only(top: 5, bottom: 5, left: 1, right: 1),
child: Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return categoryItemsTabs(index);
},
itemCount: 5,
),
),
),
),
Expanded(
child: Container(
child: ListView.builder(
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
),
)
]),
),
);

Rounded ends on horizontal listview flutter

do you know if there is any way i could make my listview ends rounded?
Ive tried wraping the listview builder in a container with box decoration, borderadius and it did not work.
Any help is appreciated.
How it looks like:
https://i.stack.imgur.com/Jr4WJ.png
my code:
Padding(
padding: EdgeInsets.only(left: 5.0),
child: Container(
color: null,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: profiles[0].skills.length,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15)),
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
setState(() {
_filterselectedIndex = index;
});
print(index);
} //setState(() => _filterselected = index)
,
child: Align(
alignment: Alignment.centerRight,
child: Container(
margin: EdgeInsets.all(10.0),
height: 32,
//width: 100,
decoration: BoxDecoration(
color: _filterselectedIndex == index
? Theme.of(context).accentColor
: Colors.white,
borderRadius:
BorderRadius.circular(15.0),
),
child: Padding(
padding: EdgeInsets.only(
left: 20,
right: 20,
),
child: Align(
alignment: Alignment.center,
child: Text(
profiles[0].skills[index],
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
),
),
),
),
),
),
),
);
},
),
))

Yes, there are multiple ways. The easiest way i think would be using containers. Wrap your widget with a container widget. Then add decoration to it like the code below :
return ListView.builder(
itemBuilder: (context, position) {
return Container(
decoration: BoxDecoration(
color: Colors.black,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25.0),
bottomRight: Radius.circular(25.0))),
child: Paste your existing code.
))
You can also do it using ClipRRect.

If I am correctly understanding your question you want to want to round the corner of yours listView, SO there are various method of doing that, One method is Wrapping the Listview in Container and then in decoration giving it borderRadous.
I have implemented the same functionality for you.
here is the code.
return Scaffold(
appBar: AppBar(
title: Text("App Bar"),
),
body: Container(
padding: EdgeInsets.all(26),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(
16) // <- incease the value for more rounded corner
),
child: ListView(
children: <Widget>[
Text("List Item 1"),
Divider(),
Text("List Item 1"),
Divider(),
Text("List Item 1"),
Divider(),
Text("List Item 1"),
Divider(),
],
),
),
);
I have a clone of app where I have implemented this type of listview with greater functionality like gestures and divider and other. (https://github.com/atul-chaudhary/country_dairy/blob/master/lib/user_func/user_menu.dart)

There are two ways of doing this,
First is using Container and second is ClipRRect
*Note: If you will use Container the widgets inside it will flow out if your BorderRadius will be a large number. But in ClipRRect this will not happen, it will stay inside.
See the code:
Using Container
Container(
height: 200.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(50.0))
),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.blue,
width: 150.0,
),
);
},
itemCount: 10
),
),
Using ClipRRect
SizedBox(
height: 200.0,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(50.0)),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.blue,
width: 150.0,
),
);
},
itemCount: 10
),
),
)