ChatGPT has been everywhere lately. Be it on Twitter, YouTube, or the Blogosphere, people are talking about it all the time. And given the crazy stuff ChatGPT can do, I would so, all the buzz around it is only natural.
I however have only been watching it from afar, until this morning, when I finally thought of giving it a few hours and see how it goes.
Not to mention, it is the most accurate chatbot I have ever talked to. I began with some basic stuff like generating blog posts with ChatGPT and asking a few random questions here and there.
But the real fun began when I thought of asking it to create a Flutter App for me!
Creating a Flutter App using ChatGPT
Functionality-wise, the requirement was quite simple. My main intention was to see whether ChatGPT can give me the complete code and instructions, if any, that I can just copy-paste to VSCode and run.
Without writing a single line of code!
I thought of asking it to create a simple RunningApp in Flutter, that can track the distance covered and the time taken when on a run.
My first ChatGPT prompt was this:
Write me a simple running app in Flutter
ChatGPT, almost immediately, threw this bit of code for me:
import 'package:flutter/material.dart';
import 'dart:async';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Running App',
home: StopwatchPage(),
);
}
}
class StopwatchPage extends StatefulWidget {
@override
_StopwatchPageState createState() => _StopwatchPageState();
}
class _StopwatchPageState extends State<StopwatchPage> {
Stopwatch _stopwatch = Stopwatch();
Timer _timer;
Duration _duration = Duration();
void _startTimer() {
setState(() {
_stopwatch.start();
_timer = Timer.periodic(Duration(milliseconds: 100), _updateTimer);
});
}
void _stopTimer() {
setState(() {
_stopwatch.stop();
_timer.cancel();
});
}
void _resetTimer() {
setState(() {
_stopwatch.reset();
_duration = Duration();
});
}
void _updateTimer(Timer timer) {
setState(() {
_duration = _stopwatch.elapsed;
});
}
String _formatDuration(Duration duration) {
String twoDigits(int n) {
if (n >= 10) return "$n";
return "0$n";
}
String twoDigitMinutes = twoDigits(duration.inMinutes.remainder(60));
String twoDigitSeconds = twoDigits(duration.inSeconds.remainder(60));
String twoDigitMilliseconds =
twoDigits(duration.inMilliseconds.remainder(100));
return "$twoDigitMinutes:$twoDigitSeconds.$twoDigitMilliseconds";
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Running App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Distance: 0 km',
style: TextStyle(fontSize: 20),
),
SizedBox(height: 20),
Text(
'Time: ${_formatDuration(_duration)}',
style: TextStyle(fontSize: 20),
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FloatingActionButton(
onPressed: _startTimer,
child: Icon(Icons.play_arrow),
),
SizedBox(width: 20),
FloatingActionButton(
onPressed: _stopTimer,
child: Icon(Icons.stop),
),
SizedBox(width: 20),
FloatingActionButton(
onPressed: _resetTimer,
child: Icon(Icons.replay),
),
],
),
],
),
),
);
}
}
Below the code, ChatGPT also gave me some basic details about how the code works. You can see that bit, below:
This code creates a simple UI with two text widgets for displaying the distance and time, and three floating action buttons for starting, stopping, and resetting the stopwatch.
The stopwatch is implemented using a Stopwatch object and a Timer object to update the UI every 100 milliseconds. The distance is currently hard-coded to 0 km, but you can replace it with your own implementation for tracking distance based on location data.
That's it! You should now have a basic running app in Flutter that tracks your running time.
On the side, I had already created a fresh Flutter project. All I had to now do it was, replace the existing code in the lib/main.dart file with what ChatGPT has given me and see if it works.
I copy-pasted the above-mentioned code, saved the main.dart file and hit run.
Bamm!! Error!!
On line 22, the Timer _timer; value threw the following error:
Non-nullable instance field '_timer' must be initialized.
Thankfully, it was a simple problem that I solved by updating the variable declaration as in the code below:
late Timer _timer;
That's the only code I had to write. The app ran smoothly on the simulator and did what it was supposed to, theoretically.
Damn!! This is for real!!
A flutter app completely written by a chatbot that is smart!
You can download the app created by ChatGPT from here.
Top comments (0)