All the above solutions work well for static data. But if you are looking at using dynamic data then, the solution below is for you.
Table(
border: TableBorder(
horizontalInside:
BorderSide(color: scaffoldBgColor, width: 10.0)),
children: [
//This table row is for the table header
TableRow(children: [
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
"INDEX",
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black87),
),
),
),
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
"NAME",
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black87),
),
),
),
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
"ACTION",
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black87),
),
),
),
]),
// Using the spread operator to add the remaining table rows which have dynamic data
...students.asMap().entries.map(
(student) {
return TableRow(
decoration: BoxDecoration(color: tertiary),
children: [
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Text(
student.value.id.toString(),
),
),
),
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Text(
'${student.value.firstName} ${student.value.surName}',
),
),
),
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Checkbox(
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
onChanged: (val) {},
value: false,
),
),
),
]);
},
)
],
)
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
