Develop Reference

Flutter: List.generate isn't being populated

First time using flutter: I'm trying to populate this column with a StatelessWidget but when I run the app, List is completely blank, even though List length is corretly displaying space for the amount of items I'm trying to display. When I debug the app there are no errors, so I can't understand if I'm submitting a completely blank widget or if I'm not inserting into the list the right way.
What I'm trying to achieve is displaying a placeholder card: once clicked it should follow the route and link to another page.
Here is my widget:
import 'package:progetto_esame_febbraio/utils/config.dart';
import 'package:flutter/material.dart';
class DoctorCard extends StatelessWidget {
const DoctorCard({Key? key, required this.route}) : super(key: key);
final String route;
#override
Widget build(BuildContext context) {
Config().init(context);
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 100),
height: 150,
child: GestureDetector(
child: Card(
elevation: 5,
color: Colors.black,
child: Row(
children: [
SizedBox(
width: Config.widthSize * 0.33,
child: Image.asset(
'assets/facebook.png',
fit: BoxFit.fill,
),
),
Flexible(
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text(
'Dr Richart',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const Text(
'Dental',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.normal,
),
),
const Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const <Widget>[
Icon(
Icons.star_border,
color: Colors.yellow,
size: 16,),
Spacer(
flex: 1,
),
Text('4.5'),
Spacer(
flex: 1,
),
Text('Reviews'),
Spacer(
flex: 1,
),
Text('(20)'),
Spacer(
flex: 7,
),
],
),
],
),
),
),
],
),
),
onTap: () {
Navigator.of(context).pushNamed(route);
}, // rinvia al dettaglio dottore
),
);
}
}
And Here is my home page:
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 15,
vertical: 15,
),
child: SafeArea(
child: SingleChildScrollView(
child: Column(
children: List.generate(5, (index) {
return const DoctorCard(
route: 'doc_details',
);
}),
),
),
),
),
);
}
}

You are having too much padding.
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),//here it was 100
height: 150,
child: GestureDetector(

Unexpected Line between Containers Flutter

Many Times in flutter I Found a Line between two Containers in flutter.
Code example
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({
Key? key,
required this.title,
}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
color: Colors.red,
width: double.infinity,
child: Column(
children: [
Container(
height: 150,
child: const Center(
child: Text('cdccd'),
),
),
Container(
height: 20,
color: Colors.red,
),
buildSeperator()
],
),
),
Container(
height: 300,
width: double.infinity,
child: Text('cdcdcd'),
),
],
),
),
);
}
///Build Seperator
Widget buildSeperator() {
return Stack(
children: [
Container(
height: 24,
color: Colors.red,
),
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
color: Colors.white,
),
height: 24,
width: double.infinity,
),
],
);
}
}
Reference Image:
If It's a Flutter Issue: Flutter Team Request you to Resolve it.

Work Around but not final Solution,
Add Another Container Above the Container with a border with a higher height.
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 0,
backgroundColor: Color(0xFF842247),
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
color: const Color(0xFF842247),
height: 56,
),
Container(
color: const Color(0xFF842247),
width: double.infinity,
child: Column(
children: [
Container(
height: 24,
child: const Center(
child: Text('cdccd'),
),
),
buildSeperator()
],
),
),
Container(
height: 300,
// width: double.infinity,
child: Text('cdcdcd'),
),
],
),
),
);
}
///Build Seperator
Widget buildSeperator() {
return Stack(
clipBehavior: Clip.none,
children: [
Container(
height: 24,
color: const Color(0xFF842247),
),
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
color: Colors.white,
),
height: 24,
width: double.infinity,
),
],
);
}
}

How to delete blank spaces or null Container in SliverGrid.count?

I'm trying to delete the Null Container in SliverGrid.count after validated the map entries . I wish the issue arrive you . thanks in advance for you solution .
class myGridItem extends StatefulWidget {
final Item item;
final EdgeInsets? margin;
const myGridItem({
Key? key,
required this.item,
this.margin,
}) : super(key: key);
#override
_myGridItemState createState() => _myGridItemState();
}
class _myGridItemState extends State<myGridItem> {
#override
Widget build(BuildContext context) {
return Container(
margin: widget.margin == null ? EdgeInsets.zero : widget.margin,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(7),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
offset: Offset.zero,
blurRadius: 15.0,
)
],
),
child: Column(
children: [
Expanded(
child: Stack(
alignment: Alignment.center,
children: [
Container(
margin: EdgeInsets.only(top: 37),
height: 180,
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.bottomCenter,
image: AssetImage(widget.item.imagePath),
),
),
),
// --------------------------- create favourit widget
Positioned(
top: 16,
right: 16,
child: Container(
width: 40,
height: 40,
alignment: Alignment.center,
decoration: BoxDecoration(
color: primaryColor,
shape: BoxShape.circle,
),
child: Text(
'999%',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
),
),
// ------------------------- discont missing
],
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.item.name,
style: TextStyle(
color: Colors.black,
fontSize: 13,
height: 1.5,
),
),
SizedBox(
height: 10,
),
Wrap(
spacing: 3,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'${Item.format(widget.item.price)}',
style: TextStyle(
fontSize: 18,
color: primaryColor,
height: 1.5,
),
),
],
)
],
),
],
),
)
],
),
);
}
}
Here the creation of SliverGrid.count to display the items I tried to use SliverChildBuilderDelegate but the same issue after some Editing on it to reach the same level of SliverGrid.count .
class myCartItemDisplay extends StatefulWidget {
#override
_myCartItemDisplayState createState() => _myCartItemDisplayState();
}
class _myCartItemDisplayState extends State<myCartItemDisplay> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: myAppBar(
title: 'Cart',
myBarColor: Colors.white,
mybackWidget: HomeScreen(),
),
bottomNavigationBar: AppBottomNavigation(),
backgroundColor: Colors.white,
body: SafeArea(
child: CustomScrollView(
slivers: [
Container(
child: SliverGrid.count(
crossAxisCount: 2,
childAspectRatio: 0.65,
mainAxisSpacing: 16,
crossAxisSpacing: 16,
children: Fake.furniture.asMap().entries.map((f) {
return Container(
child: f.value.addToCart == 1
? myGridItem(
item: f.value,
margin: EdgeInsets.only(
left: f.key.isEven ? 16 : 0,
right: f.key.isOdd ? 16 : 0,
))
: null,
);
}).toList(),
),
),
],
),
),
);
}
}

You can add a filter before your map:
children: Fake.furniture.asMap().entries
.where((f) => f.value.addToCart == 1)
.map((f) {
return Container(
child: myGridItem(
item: f.value,
margin: EdgeInsets.only(
left: f.key.isEven ? 16 : 0,
right: f.key.isOdd ? 16 : 0,
),
),
);
}).toList(),
This way you won't end up with any null entries in the first place.

I fixed it by add a new List it has my target entries
List<Item> _names = Fake.furniture.where((i) => i.addToCart == 1).toList();
And then :
_names.asMap().entries.map((f)
But if you have another solution with flutter give us it , thanks

How to shift image top bottom in flutter

I was trying to make this page but this design in last is not shifting to the last bottom, I've tried padding but this doesn't look good and also I've tried positioned widget but it is showing some error please someone tell how I can shift that design to bottom last
this is my git repo: https://github.com/cryptic-exe/Otp_verfication
this is my code:
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String dropdownValue = 'English';
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: Column(
children: [
Icon(
Icons.photo_outlined,
size: 100.0,
),
Padding(
padding: const EdgeInsets.only(top: 40.0),
child: Text(
'Please Select Your Language',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Text(
'You can change the language \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t at any time',
style: TextStyle(
fontWeight: FontWeight.w300, fontSize: 15.0),
),
),
Padding(
padding: const EdgeInsets.only(top: 9.0),
child: Container(
width: 200,
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
decoration: BoxDecoration(
border: Border.all(),
),
child: DropdownButton<String>(
value: dropdownValue,
icon: const Icon(Icons.arrow_drop_down_outlined),
isExpanded: true,
iconSize: 30,
elevation: 16,
style: const TextStyle(color: Colors.black),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>[
'English',
'Hindi',
'French',
'Spanish',
'Russian',
'Arabic'
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: TextStyle(
fontSize: 20,
letterSpacing: 0.9,
fontWeight: FontWeight.w300),
),
);
}).toList(),
),
),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
width: 200,
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
decoration: BoxDecoration(
color: Colors.deepPurple,
border: Border.all(),
),
child: TextButton(
onPressed: () {},
child: Text(
'NEXT',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.w400,
letterSpacing: 0.9),
),
),
),
),
],
),
),
Stack(
children: [
Positioned.fill(
child: Container(
width: 393,
child: Image(
image: AssetImage('Images/design2.png'),
fit: BoxFit.fill,
),
),
),
Positioned(
child: Container(
width: 393,
child: Image(
image: AssetImage('Images/design1.png'),
colorBlendMode: BlendMode.overlay,
fit: BoxFit.fill,
),
),
),
],
),
],
),
);
}
}

you can use bottomSheet to place your image.
Add the below code inside your Scaffold
bottomSheet: Container(
width: double.infinity,
child: Image(
image: AssetImage('Images/design1.png'),
colorBlendMode: BlendMode.overlay,
fit: BoxFit.fill,
),
),

You can also use a spacer to push the content down
https://api.flutter.dev/flutter/widgets/Spacer-class.html
On mobile so I cannot give snippet

Change color of cupertino scrollbar in flutter

I need to change color of cupertino scrollbar, but I can't do that via normal constructor. Is there any way to make scrollbar white?
CupertinoScrollbar(
thickness: 5,
controller: scrollController,
thicknessWhileDragging: 8,
//color not exist
)

The CupertinoScrollBar is hardcoded so on iOS you can't change the color, but you can use highlightColor for the ThemeData. The Color will then displayed on Android only.
MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
//main color
primaryColor: const Color(0xffFFC600),
//main font
fontFamily: 'Roboto-Medium',
//swatch stretching
primarySwatch: goldenThemeColor,
visualDensity: VisualDensity.adaptivePlatformDensity,
splashColor: const Color(0xffFFC600),
//color for scrollbar
highlightColor: Color(0xffffc600)
),
import 'package:flutter/material.dart';
class LandingPage extends StatefulWidget {
LandingPage({Key key}) : super(key: key);
#override
State<StatefulWidget> createState() {
return _LandingPageState();
}
}
class _LandingPageState extends State<LandingPage> {
ScrollController _controller;
double _offset = 0;
#override
void initState() {
_controller = ScrollController();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Stack(
children: [
Container(
child: SingleChildScrollView(
controller: _controller,
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.black,
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.red,
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.green,
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.blue,
),
],
),
),
),
//Scroll bar
Container(
alignment: Alignment.centerRight,
height: MediaQuery.of(context).size.height,
width: 20.0,
margin: EdgeInsets.only(left: MediaQuery.of(context).size.width - 20.0),
decoration: BoxDecoration(color: Colors.black12),
child: Container(
alignment: Alignment.topCenter,
child: GestureDetector(
child: Container(
height: 40.0,
width: 15.0,
margin:
EdgeInsets.only(left: 5.0, right: 5.0, top: _offset),
decoration: BoxDecoration(
color: Colors.grey, //Change Color here
borderRadius: BorderRadius.all(Radius.circular(3.0))),
),
onVerticalDragUpdate: (dragUpdate) {
_controller.position.moveTo(dragUpdate.globalPosition.dy * 3.5);
setState(() {
if(dragUpdate.globalPosition.dy >= 0) {
_offset = dragUpdate.globalPosition.dy;
}
print("View offset ${_controller.offset} scroll-bar offset ${_offset}");
});
},
),
)
),
],
),
);
}
}