Text widget font not appearing correctly

Question

I've created a separate page with a StatefulWidget inside my Flutter app, and it has a Text widget inside of it.

However, when testing my app, the text does not render as intended - instead it shows up in a weird font with yellow underlining.

Here's my code:

import 'package:flutter/material.dart';

class ListsPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ListsPageState();
  }
}

class _ListsPageState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Text('Log in page'),
    );
  }
}

Results image

you might need to add a textsyle property to the text widget. This would help you style the text as you want see https://api.flutter.dev/flutter/widgets/Text-class.html — Saheed, Aug 01 '22 at 23:35

score 0 · Answer 1 · answered Aug 02 '22 at 00:06

This is because of the app styling found in a widget higher in the tree. The text widget searches up the tree for the app default text style or one in another widget. If you wrap the Text widget in a Scaffold, that will include different styling. See the her comment in the following code for where to try setting the default style:

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData( //HERE
          primarySwatch: Colors.blue,
        ),
        home: const HomeScreen(),
      ),
    );
  }
}

Also try wrapping the Text widget like this:

DefaultTextStyle(
  style: TextStyle(decoration: TextDecoration.none),
  child: Text('Log in page'),
)

score 0 · Accepted Answer · answered Aug 02 '22 at 08:18

Please remove Material Widget just return Text Widget Only, and please try to use the Stateless widget for better performance. Here's the example code

 import 'package:flutter/material.dart';
 import 'package:show_case/diementions/text_size.dart';

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

  @override
  Widget build(BuildContext context) {
    return Text(
      'Login Page',
      style: kLabelStyle,
    );
  }
}

score 0 · Answer 3 · answered Aug 02 '22 at 13:09

0

Set style in textwidget

Text("", style: TextStyle(decoration: TextDecoration.none),)

answered Aug 02 '22 at 13:09

Sheetal Savani

1,300
1
7
21

Text widget font not appearing correctly

3 Answers3