I Created a Flutter App Without Writing ANY Code, using ChatGPT!!
Published: 2023-04-18 10:04:05

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](https://rajivverma.me/blog/tech/google-sign-in-flutter/). 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kpw6zmubktvdqls4mz6z.jpg)

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.