Home > Software design >  Why is the appBar font weight more than in the body
Why is the appBar font weight more than in the body

Time:04-16

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'),
        ),
      ),
    );
  }
}

CodePudding user response:

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),
  ),
)
  • Related