Relocate / Move elevation position in Flutter

Changing offset of elevation is not possible in flutter. Flutter follows Material Design principles and the capability to modify parameters like offset would beat that purpose.

As you can see in the source code for shadows in flutter, elevation is nothing but a list of shadows. If you want to modify elevation parameters, I would suggest create a custom wrapper and use actual values with overridable parameter.

import 'package:flutter/material.dart';

class CustomElevation extends StatelessWidget {
  final Widget child;
  final Offset offset;
  final int elevation;
  final Map<int, List<BoxShadow>> _elevationToShadow;

  CustomElevation({@required this.child, @required this.elevation, this.offset = const Offset(0.0, 0.0)})
      : assert(child != null),
        // Here kElevationToShadow is a map exposed by flutter material design shadows
        _elevationToShadow = kElevationToShadow.map<int, List<BoxShadow>>(
          (int key, List<BoxShadow> value) => MapEntry<int, List<BoxShadow>>(
            key,
            value.map(
              (BoxShadow bs) => BoxShadow(
                offset: offset,
                blurRadius: bs.blurRadius,
                spreadRadius: bs.spreadRadius,
                color: bs.color,
              ),
            ),
          ),
        );

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        boxShadow: _elevationToShadow[elevation] ?? <BoxShadow>[],
      ),
      child: child,
    );
  }
}

or if you need something different altogether, go ahead and elevate as your heart desires 🙂

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top