Flutter Tutorial: Flutter Tutorial

To complete Mobile app UI design shadows takes someplace. In Flutter adding shadows to the widget is very easy. There are some ways we can achieve shadow in widgets. In this Tutorial, we see the two methods.

Using Container Widget
Using Card Widget

1. Using Container Widget

The Container widget is one of the popular widgets in the flutter. As you know the Container widget has the decoration property. The decoration property takes the BoxShadow.

BoxShadow Example,

boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 7,
                offset: const Offset(0, 3), // changes position of shadow
              ),
            ],

Full Container Widget example,

Container(
          margin:
              const EdgeInsets.only(left: 30, top: 100, right: 30, bottom: 50),
          height: MediaQuery.of(context).size.height / 2,
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(10),
                topRight: Radius.circular(10),
                bottomLeft: Radius.circular(10),
                bottomRight: Radius.circular(10)),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5), //shadow color
                spreadRadius: 5, // spread radius
                blurRadius: 7, // shadow blur radius
                offset: const Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
        ),

How to Add shadow to the widget in Flutter — Flutter BoxShadow Example

You can change the shadow position by changing the offset value. Also, you can change the shadow color, blur radius, spread radius.

Next, we will see the second method.

2. Using Card Widget

Using the card widget is a very easy approach. For example,

        Card(
          elevation: 8,
          shadowColor: Colors.blue,
          child: Container(
            width: 300,
            height: 200,
            color: Colors.blue,
          ),
        )

You can change shadow size by changing elevation property value.

What you probably did if you already have a DateField in your Flutter project is to create it from scratch! But did you know that you could use this package to simplify your life a lot?

First, as usual, just add it to your pubspec.yaml file.

dependencies:
   date_field: ^0.1.2
   ...

Now after a little pub get you should be able to access the package content!

Let’s try it

First, let’s just try to display a simple DateField in our view. There are two important parameters:

onDateSelected which is triggered whenever the user picks a date!
selectedDate which will be the date displayed in the field, if it is null, it will display a placeholder.

So a simple implementation would give us the following:

DateTime selectedData;...Widget buid(...) {
...return DateField(
    onDateSelected: (DateTime value) {
      setState(() {
        selectedData = value;
      });
     },
     selectedDate: selectedData,
  );

And the result should look like:

Now that we saw the basis,

let’s go a little bit further…

If you want your user to pick a date within a specified range, you should make use of the firstDate and lastDate parameters.

Example :

DateTime selectedData;...Widget buid(...) {
...return DateField(
    onDateSelected: (DateTime value) {
      setState(() {
        selectedData = value;
      });
     },
     firstDate: DateTime(2020, 3, 8),
     lastDate: DateTime(2020, 3, 20),
     selectedDate: selectedData,
  );

And now when the user picks a date, the dialog will look like that:

and even more further…

Now let’s see how we can customize this DateField, for that we have three interesting parameters:

decoration: which allows us to completely customize the field decoration.
label: which can be used to rename the field.
dateFormat: which can be used to change the way the date is shown.

Long story short, here is an example of how to combine those three parameters:

DateTime selectedData;...Widget buid(...) {
...return DateField(
    onDateSelected: (DateTime value) {
      setState(() {
        selectedData = value;
      });
     },
     decoration: InputDecoration(
       border: OutlineInputBorder()
     ),
     label: 'My date field',
     dateFormat: DateFormat.yMd(),
     selectedDate: selectedData,
  );

And the result is a field in a different style: