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(

How to navigate in flutter?

I was trying the navigator.push but it didn't work. The code executed without errors but my emulator won't navigate when I push the button. I tried all the three methods, the direct navigation with materialrootpage, static navigation with route map, Dynamic Navigation with onGeneratedRoute
import 'package:flutter/material.dart';
import 'submit_id.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text('Bits mess'
,style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
letterSpacing: 5
),),
backgroundColor: Colors.black,
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
child: Image(
image: NetworkImage('https://www.google.com/maps/uv?pb=!1s0x3bbfb9a68009cf11%3A0x312ca93e696b7ee0!3m1!7e115!4shttps%3A%2F%2Flh5.googleusercontent.com%2Fp%2FAF1QipNjLLtffoDS_xSU6ZBOflCueMzOhW_10s6udnm0%3Dw162-h108-n-k-no!5smess%20food%20-%20Google%20Search!15sCgIgAQ&imagekey=!1e10!2sAF1QipNjLLtffoDS_xSU6ZBOflCueMzOhW_10s6udnm0&hl=en&sa=X&ved=2ahUKEwiuw4HCwsn6AhWc9DgGHWgYCJoQ7ZgBKAF6BAgSEAM#',
scale:0.6 ),
)
),
SizedBox(height: 140,width: 12),
Container(
//margin: EdgeInsets.symmetric(vertical: 60,horizontal: 150),
//padding: EdgeInsets.symmetric(horizontal: 0.5,vertical: 0.5),
child: SizedBox
(width: 300,
height: 70,
in this widget I used the navigator widget
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Submitid())
);
},
child: Text('Submit ID')),
Ignore from here if you want to
)),
SizedBox(height: 70,width: 10),
Container(
//margin: EdgeInsets.symmetric(vertical: 60,horizontal: 150),
//padding: EdgeInsets.symmetric(horizontal: 0.5,vertical: 0.5),
child: SizedBox(
width: 300,
height: 70,
child: ElevatedButton(onPressed: () {},
child: Text('Get ID'),
style: ElevatedButton.styleFrom(backgroundColor: Colors.orange),
)),
),
SizedBox(height: 50,width: 10),
]
),
)
)
);
}
}
The screen I want to navigate to
import 'package:flutter/material.dart';
class Submitid extends StatefulWidget {
const Submitid({Key? key}) : super(key: key);
#override
State<Submitid> createState() => _SubmitidState();
}
class _SubmitidState extends State<Submitid> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text('Bits mess'
,style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
letterSpacing: 5
),),
backgroundColor: Colors.black,
centerTitle: true,
),
),
);
}
}

You need to wrap your Scaffold widget in MaterialApp to reach different context. You can extract your Scaffold into a class:
class Home extends StatelessWidget{
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text('Bits mess',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
letterSpacing: 5
)),
backgroundColor: Colors.black,
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
child: Image(
image: NetworkImage('https://www.google.com/maps/uv?pb=!1s0x3bbfb9a68009cf11%3A0x312ca93e696b7ee0!3m1!7e115!4shttps%3A%2F%2Flh5.googleusercontent.com%2Fp%2FAF1QipNjLLtffoDS_xSU6ZBOflCueMzOhW_10s6udnm0%3Dw162-h108-n-k-no!5smess%20food%20-%20Google%20Search!15sCgIgAQ&imagekey=!1e10!2sAF1QipNjLLtffoDS_xSU6ZBOflCueMzOhW_10s6udnm0&hl=en&sa=X&ved=2ahUKEwiuw4HCwsn6AhWc9DgGHWgYCJoQ7ZgBKAF6BAgSEAM#',
scale:0.6 ),
)
),
SizedBox(height: 140,width: 12),
Container(
//margin: EdgeInsets.symmetric(vertical: 60,horizontal: 150),
//padding: EdgeInsets.symmetric(horizontal: 0.5,vertical: 0.5),
child: SizedBox
(width: 300,
height: 70,
child: ElevatedButton(
onPressed: () =>
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => Submitid()))
,
child: Text('Submit ID')),
)),
SizedBox(height: 70,width: 10),
Container(
//margin: EdgeInsets.symmetric(vertical: 60,horizontal: 150),
//padding: EdgeInsets.symmetric(horizontal: 0.5,vertical: 0.5),
child: SizedBox(
width: 300,
height: 70,
child: ElevatedButton(onPressed: () {},
child: Text('Get ID'),
style: ElevatedButton.styleFrom(),
)),
),
SizedBox(height: 50,width: 10),
]
),
)
);
}
}
And call this widget in your MaterialApp:
MaterialApp(
home: Home(),
debugShowCheckedModeBanner: false,
)

FLUTTER - A RenderFlex overflowed by 126 pixels on the right

please help me, i have a errpr in my code like this , "A RenderFlex overflowed by 126 pixels on the right". and this is my code.
I've searched the internet that most solutions use flexible, but I'm still confused where to place it. I want when the text increases, the height of the box also increases
ListView.builder(
itemCount: 5,
padding: EdgeInsets.only(left: 16, right: 16),
shrinkWrap: true,
itemBuilder: (context, index) {
return Container(
height: 76,
margin: EdgeInsets.only(bottom: 13),
padding:
EdgeInsets.only(left: 24, top: 12, bottom: 12, right: 22),
decoration: BoxDecoration(
color: Color(0xFFFFFFFF),
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
offset: Offset(0, 10),
blurRadius: 50,
color: kPrimaryColor.withOpacity(0.23))
]),
child: Row(
children: <Widget>[
Row(
children: <Widget>[
Container(
height: 57,
width: 57,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage(
"assets/images/image_1.png"))),
),
SizedBox(
width: 13,
),
Text(
"testing123451 testing123451 testing123451 testing123451",
),
],
)
],
),
);
})
please give me the solution, thank you

At first remove row's parent Row widget and wrap Text widget with Expanded.
import 'package:flutter/material.dart';
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> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: _buildBody(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Widget _buildBody() {
return ListView.builder(
itemCount: 5,
padding: EdgeInsets.only(left: 16, right: 16),
shrinkWrap: true,
itemBuilder: (context, index) {
return Container(
// height: 76,
margin: EdgeInsets.only(bottom: 13),
padding: EdgeInsets.only(left: 24, top: 12, bottom: 12, right: 22),
decoration: BoxDecoration(
color: Color(0xFFFFFFFF),
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
offset: Offset(0, 10),
blurRadius: 50,
color: Colors.blue.withOpacity(0.23))
]),
child: Row(
children: <Widget>[
Container(
height: 57,
width: 57,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/images/image_1.png"))),
),
SizedBox(
width: 13,
),
Expanded(
child: Text(
"testing123451 testing123451 testing123451 testing123451",
),
),
],
),
);
});
}
}

You could use the Expanded widget and wrap it around the Text widget, like this:
Expanded(
child: Text(
"testing123451 testing123451 testing123451 testing123451"
)
),

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

Flutter : Imageblur filter is filling the whole parent widget . I tried using positioned widget and container with custom heights.But not working

I've used a network image and I want to blur the a small section of the image for the Image Captions.
But Backdropfilter and imagefilter.blur is filling the whole image.
Container(
height: 400,
width: 350,
child: ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Stack(
children: [
Image.network(
"https://www.newsbtc.com/wp-content/uploads/2020/12/shutterstock_104159111.jpg",
fit: BoxFit.cover,
height: 400,
width: 350,
),
Positioned(
top: 100,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(
height: 200,
color: Colors.transparent,
child: Text(
"Data",
style: TextStyle(fontSize: 30),
),
),
),
)
],
),
),
),
Current Output
Required Output

You can copy paste run full code below
You can use ClipRect
Positioned(
bottom: 0,
child: ClipRect(
child: BackdropFilter(
working demo
full code
import 'package:flutter/material.dart';
import 'dart:ui';
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> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
height: 400,
width: 350,
child: ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Stack(
children: [
Image.network(
"https://www.newsbtc.com/wp-content/uploads/2020/12/shutterstock_104159111.jpg",
fit: BoxFit.cover,
height: 400,
width: 350,
),
Positioned(
bottom: 0,
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(
height: 200,
width: MediaQuery.of(context).size.width,
color: Colors.transparent,
child: Text(
"Data",
style: TextStyle(fontSize: 30),
),
),
),
),
)
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}