Make pretty Containers in Flutter

Let’s take a look at what you can do to make your Flutter containers pretty. The idea is that I’ll fill this post with more examples as I go so right now we got one example of a what I consider a pretty Container which has shadows around it and rounded borders in grey colors with a white background.

                      child: Container(
                        alignment: Alignment.center,
                        margin: EdgeInsets.all(20),
                        height: 100,
                        width: double.infinity,
                        padding: EdgeInsets.all(20),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(30),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.grey.withOpacity(0.2),
                              spreadRadius: 4,
                              blurRadius: 4,
                              offset: Offset(0, 2),
                            ),
                          ],
                        ),
                        child: Text(
                          "FileIdea Box",
                          style: TextStyle(
                            fontSize: 20,
                          ),
                        ),
                      ))

Then you can play around and add icons and change text size like this for example:

Button with text in flutter and some nice shadowing.

                      child: Container(
                          alignment: Alignment.center,
                          margin: EdgeInsets.all(20),
                          height: 100,
                          width: double.infinity,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(30),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.grey.withOpacity(0.2),
                                spreadRadius: 4,
                                blurRadius: 4,
                                offset: Offset(0, 2),
                              ),
                            ],
                          ),
                          child: TextButton.icon(
                            icon: Icon(Icons.camera),
                            label: Text(
                              'Search',
                              style: TextStyle(fontSize: 23),
                            ),
                            onPressed: () {},
                          ))