Motivational Quote App: Frosted glass effect in flutter Ep 9 Pt 3

This is the third video of our motivational quote app, in this video you will learn how to add rectange with black color opacity. If you read my previous post, we have added background image and blured the background. So let's get in to it:

Below code what we have so far:

 body: new Stack(
     children: [
       new Container(
         decoration: new BoxDecoration(
           image: new DecorationImage(
             image: new AssetImage('assets/images/bill-gates.jpg'),
             fit: BoxFit.cover,
           ),
         ),
         child: new BackdropFilter(
           filter: new ImageFilter.blur(
             sigmaX: 3.0,
             sigmaY: 3.0,
           ),
           child: new Container(
             decoration: new BoxDecoration(
               color: Colors.black.withOpacity(0.2),
             ),
           ),
         ),
       ),
       new Center(
         child: new Text('Never give up'),
      ),
    ],
 ));

Using below line we have added a text widget above the

background image

new Center(

  child: new Text('Never give up'),
),

To get a rectangle shape replace the center widget with a
Container widget.Now this will cover the whole screen.
So we need to add width and height. I'm gonna add 250.0 for
width and 150.0 for height. Those are fixed value and and
will lead to some rendering problems. I will explain those
later in this post.


new Container(
  width: 250.0,
  height: 150.0,

  child: new Text('Never give up'),
),

Still you cannot see the rectangle because we haven't add
color yet, You can add color property to the container with
opacity. But we are gonna add other properties like shadows
and radius. For those we need to make this container a
actual rectangle by using BoxDecoration. Like below:

decoration: new BoxDecoration(
  shape: BoxShape.rectangle,
  color: Colors.black.withOpacity(0.4),
),

Now Flutter identify this Container as a rectangle so now we can add border radius to get rounded corners using below line:

borderRadius: new BorderRadius.circular(10.0),

Now to add box shadow we have a property called boxShadow in BoxDecotation. It's accept list of shadows. Here we want only one shadow. We can parse four arguments to BoxShadow constructor.

One is color, second one is offset(how much off to the rectangle), blur radius to blur the displacement rectangle:

boxShadow: [
 new BoxShadow(
   color: Colors.black26,
   offset: new Offset(5.0, 5.0),
   blurRadius: 5.0,
 ),

]),

Now to add text widget to the container use the child property. And we need to center the text, so I'm gonna wrap text widget using Center widget. Also I added the white for text color using style property with new TextStyle. Like below:

child: new Center(
child: new Text(
'Never give up',
style: new TextStyle(color: Colors.white),
),

),

Now this rectangle will overflow in smaller devices and in larger devices this will be smaller than we expected, and also when rotate the device rectangle will be small because we have fixed value. So as a solution we can get the screen width and height and divide or subtract some dp's.

To get the screen details like, width and hieght(size), padding of status bar and etc we can use MediaQuery.of(context). And these data we can assign to a variable type of MediaQueryData

Note: in order this line to work, you should return a MaterialApp widget or WidgetApp first.(Look at my complete code below, for this tutorial that's how I have written that. And in upcoming videos we will structure our code in a better way)

MediaQueryData mediaQuery = MediaQuery.of(context);

To get the width I used the above variable with .size.width to get the width from size and assigned that width to a variable called screenWidth.

double screenWidth = mediaQuery.size.width;

Now I can use this variable to the width property of container widget instead of fixed value. And I want equal space in left and right because of that I have divided screenWidth by 1.5.

child: new Container(
  width: screenWidth / 1.5,

There is one more problem with our app. That is if you add a long paragraph. Text will overflow. Because we have added the fixed height to it's parent(Container). To wrap the content of the child widget or make parent widget dynamic according to it's child we can wrap Text widget with a Column widget. But since we have only one child(one Text widget) We can use Align widget. This widget will wrap it's child, if you use heightFactor property with value 1.0. Otherwise it will be as big as possible. I recommend you to read the doc and source code for more info.

child: new Align(
heightFactor: 1.0,
child: new Text('Never give up Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy. Never give up Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy. Never give up Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.-Norman Vincent Peale',
style: new TextStyle(
  color: Colors.white,
)),

)),

Complete code: