I Created a Flutter App Without Writing ANY Code, using ChatGPT!!

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.