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)
],
),
),
),
],
),
),
);
}
}
This is usually related to the surfaceTintColor
property, you can set it to transparent if you want:
appBarTheme: AppBarTheme(
surfaceTintColor: Colors.transparent,
// ...
),