Flutter Question posted in
The official Flutter documentation can be found here.

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    Try with Colors.white to your Scaffold and Colors.blue to AppBar:

     Scaffold(
     backgroundColor: Colors.white,
     appBar: AppBar(
     title: const Text('One Hour Youtube', style: TextStyle(
      color: Colors.white,
      fontSize: 18,
    ),),
     backgroundColor: Colors.blue,
    ),
  )

    if the above solution doesn’t work, please check home: const HomePage(), as you have mentioned in the MaterialApp.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search