You need to render max 4 items and 1st will get max screen width. To have overlay I used `Stack`
You can follow this widget,
```dart
class TestWidgetL extends StatefulWidget {
const TestWidgetL({Key? key}) : super(key: key);
@override
State<TestWidgetL> createState() => _TestWidgetLState();
}
class _TestWidgetLState extends State<TestWidgetL> {
int numberOfGrid = 12;
@override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
final screenWidth = constraints.maxWidth;
final screenHeight = constraints.maxHeight;
return ListView(
// use customScrollView
children: [
// imagePart
//0th index
if (numberOfGrid > 0)
Image.asset(
"assets/images/image01.png",
width: screenWidth,
height: screenHeight * .25,
fit: BoxFit.cover,
),
if (numberOfGrid > 1)
Row(
children: List.generate(
numberOfGrid > 4
? 3
: (numberOfGrid - 1) < 0
? 0
: (numberOfGrid - 1),
(index) => Stack(
children: [
Image.asset(
"assets/images/image01.png",
width: screenWidth / 3,
height: screenWidth / 3,
fit: BoxFit.cover,
),
if (numberOfGrid > 4 && index == 2)
Positioned.fill(
child: Container(
color: Colors.white12,
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"+${numberOfGrid - 4}",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 33,
),
),
Text(
"Photos",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 23,
),
),
],
),
),
)
],
),
),
),
Slider(
value: numberOfGrid.toDouble(),
min: 0,
max: 22,
onChanged: (v) {
setState(() {
numberOfGrid = v.toInt();
});
})
],
);
},
),
);
}
}
```
[![enter image description here][1]][1]
find more about widget and UI on [flutter.dev][2]
[1]: https://i.stack.imgur.com/wiJn7.png
[2]: https://docs.flutter.dev/development/ui/layout
Use `BoxDecoration` with `BoxShadow`.
Here is a visual demo manipulating the following options:
- opacity
- x offset
- y offset
- blur radius
- spread radius
The animated gif doesn't do so well with colors. You can try it yourself on a device.
[![enter image description here][1]][1]
Here is the full code for that demo:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ShadowDemo(),
),
);
}
}
class ShadowDemo extends StatefulWidget {
@override
_ShadowDemoState createState() => _ShadowDemoState();
}
class _ShadowDemoState extends State<ShadowDemo> {
var _image = NetworkImage('https://placebear.com/300/300');
var _opacity = 1.0;
var _xOffset = 0.0;
var _yOffset = 0.0;
var _blurRadius = 0.0;
var _spreadRadius = 0.0;
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Center(
child:
Container(
decoration: BoxDecoration(
color: Color(0xFF0099EE),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(0, 0, 0, _opacity),
offset: Offset(_xOffset, _yOffset),
blurRadius: _blurRadius,
spreadRadius: _spreadRadius,
)
],
),
child: Image(image:_image, width: 100, height: 100,),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(bottom: 80.0),
child: Column(
children: <Widget>[
Spacer(),
Slider(
value: _opacity,
min: 0.0,
max: 1.0,
onChanged: (newValue) =>
{
setState(() => _opacity = newValue)
},
),
Slider(
value: _xOffset,
min: -100,
max: 100,
onChanged: (newValue) =>
{
setState(() => _xOffset = newValue)
},
),
Slider(
value: _yOffset,
min: -100,
max: 100,
onChanged: (newValue) =>
{
setState(() => _yOffset = newValue)
},
),
Slider(
value: _blurRadius,
min: 0,
max: 100,
onChanged: (newValue) =>
{
setState(() => _blurRadius = newValue)
},
),
Slider(
value: _spreadRadius,
min: 0,
max: 100,
onChanged: (newValue) =>
{
setState(() => _spreadRadius = newValue)
},
),
],
),
),
)
],
);
}
}
[1]: https://i.stack.imgur.com/OqBxp.gif
