CODEWITHSUNDEEP
android-emulatordartflutterscaffolding
Dims
Dims

Reputation: 51039

How to get simple text on screen without Scafflod in Flutter?

I have cleaned Flutter example from Scafflod and button and was expecting I get the same content, but without title bar and button:

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'My app title',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);


  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      );

  }
}

Unfortunately, what I got is not fit any gates:

enter image description here

What is it? How it happen to turn so big? How to fix?

Upvotes: 3

Views: 4032

Answers (3)

Quanhua Guan
Quanhua Guan

Reputation: 463

Text(
  'Sign in / Sign up with',
  style: TextStyle(
    fontFamily: appFontFamily,
    fontSize: 20,
    decoration: TextDecoration.none,////set decoration to .none
    fontWeight: FontWeight.bold,
    color: defaultTitleColor,
  ),
)

Upvotes: 0

Mariano Zorrilla
Mariano Zorrilla

Reputation: 7686

You can wrap the text inside "Material" widget. Also, using "style:" parameter fixes the problem.

Material(
        color: Colors.transparent,
        child: Text(
            "Your Text Here",
            style: TextStyle(
              fontFamily: 'custom font', // remove this if don't have custom font
              fontSize: 20.0, // text size
              color: Colors.white, // text color
            ),
        ),
      )

Upvotes: 7

Derek Lakin
Derek Lakin

Reputation: 16319

Scaffold is setting the basic material design visual layout structure, which much include default text styles, etc. If you don't want to use Scaffold for whatever reason, then you can apply the relevant text styles and colours from the current theme using Theme.of(context). For example:

Text(
  'You have pushed the button this many times:',
  style: Theme.of(context).primaryTextTheme.headline,
  textAlign: TextAlign.center,
),

Upvotes: 4

Related Questions