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

CodePudding user response：

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

CodePudding user response：

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