Search code examples
flutterflutter-appbar

AppBar and background colors not showing in Flutter project


I am following a YT video (https://www.youtube.com/watch?v=C-fKAzdTrLU&t=1407s), which is a 1 hour Flutter tutorial. I am using VSCode and Android Studio on a Mac, creating a main page with a button that links to another with an image. The links work, but my main page is black when it should be white with a blue app bar on top.

import 'package:flutter/material.dart';

import 'home_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int currentPage = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('One Hour Youtube'),
      ),
      body: const HomePage(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          debugPrint('Floating Action Button');
        },
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: NavigationBar(
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
        onDestinationSelected: (int index) {
          setState(() {
            currentPage = index;
          });
        },
        selectedIndex: currentPage,
      ),
    );
  }
}

I typed out the same code, used ChatGPT as well and checked for any error messages.


Solution

  • Try add Colors.white to your Scaffold:

    Scaffold(
      backgroundColor: Colors.white,
      ...
    )
    

    Plus more, I saw you return a

    home: const HomePage(),
    

    but the name of your page is RootPage