iosflutterscaffold

Problems with theming scaffold in flutter


I encountered 2 main problems when theming the scaffold of my app:

Look first at the app bar and you can see it's a color different from the scaffold (something like my primary color with opacity) even though I designed it to be like the scaffold. The second problem is that at the bottom of the scaffold there is a section not styled (maybe because I'm using a SafeArea idk).

Here is the Theme data I'm using:

final theme = ThemeData(

  useMaterial3: true,
  colorScheme: const ColorScheme(
    brightness: Brightness.light,
    primary: Color.fromRGBO(248, 95, 106, 1),
    onPrimary: Colors.white,
    secondary: Color.fromRGBO(167, 183, 216, 1),
    onSecondary: Colors.white,
    error: Colors.red,
    onError: Colors.white,
    background: Color.fromARGB(240, 252, 251, 244),
    onBackground: Colors.black,
    surface: Colors.black45,
    onSurface: Colors.black,
  ),
);

And here is the code of the screen:

import 'package:flutter/material.dart';
import 'package:jimprova/models/workout_model.dart';
import 'package:jimprova/widgets/training/exercise_training_card.dart';

class TrainingScreen extends StatefulWidget {
  const TrainingScreen({
    super.key,
    required this.workout,
  });

  final Workout workout;

  @override
  State<TrainingScreen> createState() => _TrainingScreenState();
}

class _TrainingScreenState extends State<TrainingScreen> {
  int indexEx = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.background,
        title: Text(
          widget.workout.title,
          style: Theme.of(context).textTheme.titleLarge!.copyWith(
                color: Theme.of(context).colorScheme.onBackground,
                fontWeight: FontWeight.bold,
              ),
        ),
      ),
      body: SafeArea(
        child: Stack(
          children: [
            SingleChildScrollView(
                    // rest of the code... (there are only rows, columns and a listview.builder)
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

enter image description here


Solution

  • This is usually related to the surfaceTintColor property, you can set it to transparent if you want:

    appBarTheme: AppBarTheme(
      surfaceTintColor: Colors.transparent,
      // ...
    ),