Why Text widget already have predefined styles in Flutter?

1
votes

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:

enter image description here

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).

5
flutterflutter-layout

5 Answers

1
votes

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"),
          ]
      ),
    ),
  );
}
1
votes

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"),
            ]
        ),
      ),
    );
0
votes

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'),
          ),
        ),
      ),
    );
  }
}
0
votes
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'),
          ),
        ),
      ),
    );
  }
}
0
votes
MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: Center(
          child: Container(
            child: Text('Hello World'),
          ),
        ),
      ),
    );