Search code examples
windowsflutterdartfontsappbar

Why is the appBar font weight more than in the body


When I try to run my Flutter app (on windows), I see that the appBar title weight is more than the body text weight (even though they're the same font)

This is what I mean - the appBar weight is more than the weight of the text on the body

My code looks like this:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(fontFamily: 'SegoeUIVar'),
      debugShowCheckedModeBanner: false,
      title: 'Hello World',
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: const Size.fromHeight(32.0),
          child: AppBar(
            elevation: 0,
            backgroundColor: const Color.fromARGB(230, 30, 31, 28),
            centerTitle: true,
            title: const Text("Hello World", style: TextStyle(fontSize: 15, fontFamily: 'SegoeUIVar')),
          )
        ),

        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Solution

  • In flutter each widget has its own theme, so even if it is assigned a different fontFamily, the fontWeight will be default to that widgets theme. To assign the same fontWweight you need to do it in the TextStyle or in the actual theme

     Text(
        'Hello',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
    )