Why Text widget already have predefined styles in Flutter? - flutter

Question

I have a route that I pushed using Navigator. The weird thing about this is that in this new route, all of my Text widget looks like already have a predetermined style of red color, 32-ish font size, console font face, and double yellow underline.
Here's the code:
import 'package:flutter/material.dart';
import 'package:movie_browsers/src/models/item_model.dart';
class MovieDetail extends StatelessWidget {
final MovieModel movieModel;
const MovieDetail({ Key key, this.movieModel }) : super(key: key);
#override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Column(
children: [
Image.network('https://image.tmdb.org/t/p/w185${movieModel.posterPath}', fit: BoxFit.cover),
Text(movieModel.title, style: TextStyle(color: const Color(0xFFFFFFFFF), fontSize: 14),),
Text("testing"),
]
),
);
}
}
And here's the screenshot:
I already apply styles to the "Frozen II" text as I'm trying to wrap my head around the weird style. The "testing" text is the 'plain' Text widget result without any style. Why is this happening?
The previous (main) screen doesn't have this weirdness. All the text are normal (as expected from Text with no styles).

Answer 1

That's because you're not using any Material component. There are many solutions for it, like you can use Scaffold, Material widget etc.
#override
Widget build(BuildContext context) {
return Material( // add this
child: Center(
child: Column(
children: [
Image.network('https://image.tmdb.org/t/p/w185${movieModel.posterPath}', fit: BoxFit.cover),
Text(movieModel.title, style: TextStyle(color: const Color(0xFFFFFFFFF), fontSize: 14),),
Text("testing"),
]
),
),
);
}

Answer 2

Wrap your whole code inside Scaffold,
Scaffold(
body: Center(
child: Column(
children: [
Image.network('https://image.tmdb.org/t/p/w185${movieModel.posterPath}', fit: BoxFit.cover),
Text(movieModel.title, style: TextStyle(color: const Color(0xFFFFFFFFF), fontSize: 14),),
Text("testing"),
]
),
),
);

Answer 3

Use Scaffold widget
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter'),
),
body: Center(
child: Container(
child: Text('Hello World'),
),
),
),
);
}
}

Answer 4

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter'),
),
body: Center(
child: Container(
child: Text('Hello World'),
),
),
),
);
}
}

Answer 5

MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter'),
),
body: Center(
child: Container(
child: Text('Hello World'),
),
),
),
);