Flutter is an open-source User Interface SDK that is Software Development Kit. Flutter is an open-source project, and it is maintained by Google. Currently, in March 2021. Google has been released another new version of flutter that is Flutter 2. Flutter as a software development kit is great, but while building a big application it is evident that there will be some problems or bugs in the code which has to be debugged. Flutter provides multiple debugging tools such as timeline inspector, memory and performance inspector, and else. These tools ease up the debugging process for a developer, below are listed different tools for debugging flutter apps.
Hello friends, I will talk about my new blog on Debugging In Flutter. We will also implement a demo of the Debugging In Flutter, and describes its properties, and how to use them in your flutter applications. So let’s get started.
Table Of Contents :
Flutter Debugging :
Flutter has a wide range of devices and features to help debug applications. The following equipment and facilities are displayed.
- DevTools: DevTools for debugging app this may be the first tool. It is a suite of performance and profiling tools run on a browser.
- Logging: Logging view widget Inspector working in DevTools and also indirectly from the Android Studio & IntelliJ. The inspector allows checking the visual representation of widget trees.
- Debug flags: Debug Flags provides us with a variety of debug flags and functions to debug your app at various points. To use these features we need to compile in debug mode.
Code Implement :
You need to implement it in your code respectively:
As we will discuss here the debug flag and some of its functions.So let’s get started.
First, we need to import rendering the dart from the flutter.
import 'package:flutter/rendering.dart';debugPaintSizeEnabled:
This screen uses the paint size embed function which is of type, it creates a render box around the screen which highlights the box with some colors and by drawing a thick line on the side of the box.
Let us understand this with the help of a reference.
debugPaintSizeEnabled = true;When the app is debugged then we ought to get the screen’s output like the underneath screen capture.
debugPaintBaselineEnabled:
The debugPaintBaselineEnabled This paints a line on each baseline in the screen. Now add debugPaintBaselineEnabled then restart the app.
Let us understand this with the help of a reference.
debugPaintBaselinesEnabled = true;When the app is debugged then we ought to get the screen’s output like the underneath screen capture.
debugPaintLayerBorderEnabled:
debugPaintLayerBordersEnabled This makes each layer in the screen a box around a border and draws a paint line. Now add debugPaintLayerBordersEnabled then restart the app.
Let us understand this with the help of a reference.
debugPaintLayerBordersEnabled = true;When the app is debugged then we ought to get the screen’s output like the underneath screen capture.
debugRepaintRainbowEnabled:
The debugRepaintRainbowEnabled This overlays the rotating set of colors when repeating layers in checked mode after running in debug mode on the screen. Now add debugRepaintRainbowEnabled then restart the app.
Let us understand this with the help of a reference.
debugRepaintRainbowEnabled = true;When the app is debugged then we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_debugging_demo/shared/custom_button.dart';
import 'package:flutter_debugging_demo/shared/custom_text_field.dart';
import 'package:flutter_debugging_demo/themes/appthemes.dart';
import 'package:flutter_debugging_demo/themes/device_size.dart';
import 'package:flutter/rendering.dart';
class DebuggingDemo extends StatefulWidget {
@override
_DebuggingDemoState createState() => _DebuggingDemoState();
}
class _DebuggingDemoState extends State<DebuggingDemo> {
@override
Widget build(BuildContext context) {
debugPaintSizeEnabled = true;
debugPaintBaselinesEnabled = false;
debugPaintLayerBordersEnabled = false;
debugRepaintRainbowEnabled = false;
debugRepaintTextRainbowEnabled = false;
debugCheckElevationsEnabled = false;
debugDisableClipLayers = false;
debugDisablePhysicalShapeLayers = false;
debugDisableOpacityLayers = false;
return Scaffold(
appBar: AppBar(
title: Text('Debugging Demo'),
),
body: Container(
height: DeviceSize.height(context),
width: DeviceSize.width(context),
child: Column(
children: [
Container(
margin: EdgeInsets.only(top: 100),
//alignment:Alignment.bottomCenter,
child: ClipOval(
child: CircleAvatar(
backgroundColor: Colors.transparent,
maxRadius: 50,
child: Image.asset(
'assets/images/login.jpeg',
fit: BoxFit.cover,
width: DeviceSize.width(context),
),
),
),
),
Container(
padding: EdgeInsets.only(top: 40, left: 25, right: 25),
child: CustomTextField(
hintText: 'User Name',
type: TextInputType.text,
obscureText: false,
labelText: '',
),
),
Container(
padding: EdgeInsets.only(top: 20, left: 25, right: 25),
child: CustomTextField(
hintText: 'Passwrod',
type: TextInputType.text,
obscureText: true,
labelText: '',
),
),
Container(
margin: EdgeInsets.only(top: 20),
child: CustomButton(
callbackTertiary: () {
debugDumpApp();
},
color: Colors.blue,
mainButtonText: 'Login',
),
),
Container(
padding: EdgeInsets.only(top: 20, left: 25, right: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Forgot Password?',
style: TextStyle(fontSize: 13, fontWeight: FontWeight.w700),
),
Text(
'Register',
style: TextStyle(
color: Colors.blue,
fontSize: 13,
fontWeight: FontWeight.w700),
),
],
),
),
],
),
),
);
}
void debugDumpApp() {
assert(WidgetsBinding.instance != null);
String mode = 'RELEASE MODE';
assert(() {
mode = 'CHECKED MODE';
return true;
}());
debugPrint('${WidgetsBinding.instance.runtimeType} - $mode');
if (WidgetsBinding.instance.renderViewElement != null) {
debugPrint(WidgetsBinding.instance.renderViewElement.toStringDeep());
} else {
debugPrint('<no tree currently mounted>');
}
}
}Conclusion :
In this article, I have explained Debugging in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Debugging demo from our side.
I hope this blog will provide you with sufficient information in Trying up the Debugging in your flutter project. We showed you what Debugging is and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
