Thanks for your prompt answer but I cannot see how to add a Row empty space as the GridView is limiting the size of each item in the grid. I have tested this forcing the positioned item with selectedItem == 0. Here my code:
SizedBox(
width: double.infinity,
child: SizedBox(
height: MediaQuery.of(context).size.height / 3.2,
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
mainAxisExtent: 40),
itemCount: [1, 2, 3, 4, 5, 6, 7, 8, 9].length + 1,
clipBehavior: Clip.none,
itemBuilder: (context, index) {
if (index != 1) {
return Stack(
clipBehavior: Clip.none,
children: [
TextButton(
onPressed: (selectedNode == nodes[index].slaveId)
? () {}
: () => Provider.of<SelectedNode>(context,
listen: false)
.value = nodes[index].slaveId!,
style: TextButton.styleFrom(
backgroundColor:
(selectedNode == nodes[index].slaveId)
? selectedColor
: unselectedColor),
child: Text(
'Node ${nodes[index].slaveId.toString().padLeft(3, '0')}'),
),
index == 0
? Positioned(
child: Text('1hjkkhj'),
bottom: -20,
left: 0,
right: 0,
)
: SizedBox(),
],
);
} else {
return TextButton(
onPressed: (selectedNode == nodes[index].slaveId)
? () {}
: () => Provider.of<SelectedNode>(context,
listen: false)
.value = nodes[index].slaveId!,
style: TextButton.styleFrom(
backgroundColor:
(selectedNode == nodes[index].slaveId)
? selectedColor
: unselectedColor),
child: Text(
'Node ${nodes[index].slaveId.toString().padLeft(3, '0')}'),
);
}
}),
),
),
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
