Here you will see some quick Flutter Coding Tips & Tricks.

Let’s start…

Watch Video Tutorial

Flutter Tips & Tricks

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(),
         ],
       ),
     ),
   );
 }

Color in Different ways

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),
    );
  }

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),
        ),
      ),
    );
  }

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),
     ),
   );
 }

Rounded Image Using ClipOval

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

Rounded Image using CircularAvatar

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

#flutter #flutter-ui #flutter-web #flutter-app-development #flutter-widget