Flutter – Tips & Tricks

Hello
welcome back to another flutter tutorial.
Here I will be showing some quick flutter coding tips and tricks.

 
Watch Video Tutorial
 

 
# Tip 1 – Dismiss Keyboard
 
To dismiss Keyboard, we have to set focus on a different node as shown in the example below using the Gesture Detector.
 

 _dismissKeyboard(BuildContext context) {
    FocusScope.of(context).requestFocus(new FocusNode());
  }

  Widget body1() {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        _dismissKeyboard(context);
      },
      child: Container(
        color: Colors.white,
        child: Column(
          children: <Widget>[
            TextField(),
          ],
        ),
      ),
    );
  }

 
# Tip 2
 
Color the background of a widget using opacity in different ways.
You can give RGB colors with opacity or Hex color with opacity.
 

Widget body2() {
    return  Container(
       color: Color.fromRGBO(0, 0, 0, 0.5),
    );
    return  Container(
      color: Color(0xFF4286f4),
    );
    return  Container(
      color: Color(0xFF4286f4).withOpacity(0.5),
    );
    return Container(
      color: Color(0xFF4286f4),
    );
  }

 
#Tip 3 – Rounded Container
 

Widget body4() {
    return Container(
      height: 40.0,
      padding: EdgeInsets.all(20.0),
      margin: EdgeInsets.all(30.0),
      decoration: BoxDecoration(
        color: Colors.green,
        borderRadius: BorderRadius.all(
          Radius.circular(5.0),
        ),
      ),
    );
  }

 
#Tip 4 – Container with Rounded Image
 

 Widget body5() {
    return Container(
      width: 250.0,
      height: 300.0,
      padding: EdgeInsets.all(20.0),
      margin: EdgeInsets.all(30.0),
      decoration: BoxDecoration(
        color: Colors.green,
        borderRadius: BorderRadius.circular(50.0),
        image: DecorationImage(image: NetworkImage(imgUrl), fit: BoxFit.fill),
      ),
    );
  }

 
#Tip – 5 Rounded Image Using ClipOval
 

Widget body6() {
    return ClipOval(
      child: Image.network(
        imgUrl,
        fit: BoxFit.fill,
        width: 190.0,
        height: 190.0,
      ),
    );
  }

 
#Tip 6 – Rounded Image using CircularAvatar
 

 Widget body7() {
    return Container(
      height: 300,
      width: 200,
      child: CircleAvatar(
        radius: 100.0,
        backgroundImage: NetworkImage(
          imgUrl,
        ),
      ),
    );
  }

 
#Tip – 7 Splash Anywhere you tap the widget using InkWell
 

  Widget body3() {
    return Container(
      color: Colors.orangeAccent,
      height: 100.0,
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          splashColor: Colors.white.withOpacity(0.2),
          onTap: this._onSelect,
          child: Center(
            child: Text("Hello"),
          ),
        ),
      ),
    );
  }

 
#Tip – 8 Custom ListView Seperator
 

 Widget body8() {
    return ListView.separated(
      separatorBuilder: (context, index) => Divider(
            color: Colors.black,
          ),
      itemCount: 20,
      itemBuilder: (context, index) => Padding(
            padding: EdgeInsets.all(8.0),
            child: Center(child: Text("Index $index")),
          ),
    );
  }

 
#Tip – 9 Null Aware Operators.
 
Here is a short hand for initializing null variables
 

if (imgUrl == null) {
  imgUrl =
      'https://images.pexels.com/photos/40984/animal-ara-macao-beak-bird-40984.jpeg?cs=srgb&dl=animal-colorful-colourful-40984.jpg&fm=jpg';
}

 
This is the shorthand for doing the above code.
 

imgUrl ??=
    'https://images.pexels.com/photos/40984/animal-ara-macao-beak-bird-40984.jpeg?cs=srgb&dl=animal-colorful-colourful-40984.jpg&fm=jpg';

Source Code

Complete Source Code is available in this link.