How to give Elevation to Container in Flutter

In application development, app design is an essential part of any app. Sometimes we need to customize app design according to the UI point of view. In the Flutter UI kit container is the most usable component so in this article we are going to learn How to give Elevation to Container in Flutter.

By default, the container is not supported any elevation properties right now so we need to wrap the Container in Card widget to give elevation to a container. Let's understand with an example.

Example:

Card(
              elevation: 4,
              child: Container(
                padding: EdgeInsets.all(10),
                width: 200,
                height: 200,
                child: Center(
                    child: Text(
                  "Errorgram",
                  style: TextStyle(color: Colors.blue, fontSize: 20),
                )),
              ))

 

You can see in the above piece of code where we wrap the container inside the card widget with an elevation:4 and you can also set other card properties according to your requirement. 

Full Code:

import 'package:flutter/material.dart';

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key}) : super(key: key);

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      bottom: false,
      child: Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          centerTitle: true,
          title: Text(
            "Errorgram",
          ),
        ),
        body: Center(
          child: Card(
              elevation: 4,
              child: Container(
                padding: EdgeInsets.all(10),
                width: 200,
                height: 200,
                child: Center(
                    child: Text(
                  "Errorgram",
                  style: TextStyle(color: Colors.blue, fontSize: 20),
                )),
              )),
        ),
      ),
    );
  }
}

 

You can see the output of the example in the below screenshot.

Output:

Conclusion:

We saw in this post How to give Elevation to Container in Flutter with an example. I hope this article may help you and you can see other useful articles here.

 

Tags: