Flutter – How to add a Appbar to my code, i have tried so many tutorials and i cannot stitch the code code together

I have tried to use the basic AppBar Demo code and add it to my code but for the life of me i cannot get it to work.

My Code:

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: AddTwoNumbers()));
}

class AddTwoNumbers extends StatefulWidget {
  const AddTwoNumbers({super.key});

  @override
  State<AddTwoNumbers> createState() => _AddTwoNumbersState();
}

class _AddTwoNumbersState extends State<AddTwoNumbers> {
  List<TextEditingController> roundOneFields = [];
  List<TextEditingController> roundTwoFields = [];
  int roundOneResult = 0;
  int roundTwoResult = 0;

  @override
  void initState() {
    roundOneFields =
        List.generate(20, (index) => TextEditingController(text: '0'));
    roundTwoFields =
        List.generate(20, (index) => TextEditingController(text: '0'));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Row(
              children: [
                Expanded(
                  child: ListView.builder(
                    itemCount: 20,
                    shrinkWrap: true,
                    itemBuilder: (context, index) => Row(
                      children: <Widget>[
                        Text("R1 Target ${index + 1}:"),
                        Flexible(
                          child: TextField(
                            decoration: const InputDecoration(
                                contentPadding:
                                    EdgeInsets.symmetric(horizontal: 8)),
                            keyboardType: TextInputType.number,
                            controller: roundOneFields[index],
                          ),
                        ),
                      ],
                    ),
                    physics: const BouncingScrollPhysics(),
                  ),
                ),
                const SizedBox(
                  width: 24,
                ),
                Expanded(
                  child: ListView.builder(
                    itemCount: 20,
                    shrinkWrap: true,
                    physics: const BouncingScrollPhysics(),
                    itemBuilder: (context, index) => Row(
                      children: <Widget>[
                        Text("R2 Target ${index + 1}:"),
                        Flexible(
                          child: TextField(
                            decoration: const InputDecoration(
                                contentPadding:
                                    EdgeInsets.symmetric(horizontal: 8)),
                            keyboardType: TextInputType.number,
                            controller: roundTwoFields[index],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ElevatedButton(
                  child: const Text("Add"),
                  onPressed: () {
                    setState(() {
                      roundOneFields.forEach((e) =>
                          roundOneResult = roundOneResult + int.parse(e.text));
                      roundTwoFields.forEach((e) => roundTwoResult =
                          roundTwoResult + int.parse(e.text.toString()));
                    });
                  },
                )
              ],
            ),
            Text(
              "Result n Round 1: $roundOneResult and Round 2: $roundTwoResult",
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontSize: 30,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

I tried the below code but could not get it to work with my code above, im missing some like a Scaffold or containing the code. Also what concept am i missing here for my own sake and to help others.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}