How to Center the title in AppBar widget in Flutter

How to Center the title in AppBar widget in Flutter

By default the title in the AppBar widget in Flutter applications is left aligned and we may want to align it to the center.

Aligning title of AppBar widget to Center in Flutter is very much straight forward. All we need to do is to add an option centerTitle and set its value to true in the widget.

centerTitle: true

full code:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('How to Flutter') ,
        centerTitle: true,
      ),
    ) ;
  }

The output for the above code will be:

Read more about AppBar widget here: Deep Dive into AppBar

How to Word Wrap in Android Studio

How to Word Wrap in Android Studio

While working with Android Studio we may want to wrap the words inside the editor so that the entire code fits inside visible area and no need to scroll horizontally. We may also wants to wrap the code in the visible area when we want to take a screenshot of the code in the IDE.

To wrap the code, go to File – Settings – Editor – General and check the box with Soft-wrap these files.

Then add the type of the files you want to soft wrap such as *.dart. Also make sure that the file extensions are separated by semicolons (;) and not commas.

 

 

How to remove DEBUG banner from the Emulator in Flutter Apps

How to remove DEBUG banner from the Emulator in Flutter Apps

During the development Flutter automatically adds DEBUG banner to the applications. Sometimes we may want to remove this banner for any reason such as taking a screenshot without the DEBUG banner.

To remove the DEBUG banner from the application, go to main.dart and add the following option to the MaterialApp (or CupertinoApp for iOS apps ) widget

debugShowCheckedModeBanner: false,

example:

...
return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage() ,
    );
...

Flutter automatically removes the DEBUG banner when we build the application for production.

How to check Type of a Variable in Dart or Flutter

How to check Type of a Variable in Dart or Flutter

There are couple ways to determine the type of a variable in Dart/Flutter.

Similar to the way developers use ‘typeof‘ operator in JavaScript, we can use runtimeType in Dart.

example:

void main() {
  var myNum = 10;
  var myNum2 = 10.0;
  var myString = 'Hello World';
  var myBool = true;
  var myArray = [1, 2, 3];
  var person = {'id': 1, 'name': 'John Doe'};

  print(myNum.runtimeType);
  print(myNum2.runtimeType);
  print(myString.runtimeType);
  print(myBool.runtimeType);
  print(myArray.runtimeType);
  print(person.runtimeType);
}

Output:

int
double
String
bool
List<int>
_InternalLinkedHashMap<String, Object>

Pay attention to the way we initialized the variables myNum and myNum2. If you want to create a variable using var keyword and wants to make it of type double, you need to add ‘.’ else it will considered as int.

Another way to find the type of a variable in Dart/Flutter is by using is operator which is similar to instanceof operator in JavaScript.

example:

void main() {
  var myNum = 10;

  if (myNum is int) {
    print('myNum is an integer');
  }
}

Output:

myNum is an integer

Here again pay attention to the int inside the ‘if’ condition which is not a string.