CODEWITHSUNDEEP
flutter
szakes1
szakes1

Reputation: 904

How to use font settings using Theme widget?

I'm writing a really simple coupon application, however I have a problem using themes in my app.

I'm trying to create a coupon screen with its own theme, isolated from the app's main theme. The Theme widget allows me to set Scaffold's settings really easily, but the problem is with fonts. When I try to set body1 font's settings, it works, but if I create body2 settings and try to use it using Theme.of(context).textTheme.body2, it doesn't work and it fall backs to settings defined in the app's main theme. I don't want that. I would like to use isolated Theme settings for my screen.

Classic Coupon Screen

import 'package:flutter/material.dart';

class ClassicCouponScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
        scaffoldBackgroundColor: Colors.blue,
        textTheme: TextTheme(
          body1: TextStyle(color: Colors.blue) // These settings aren't applied, it doesn't work 
        )
      ),
      child: Scaffold(
        body: SafeArea(
          child: Container(
            padding: EdgeInsets.all(16.0),
            child: Column(
              children: [
                Text('Test', style: Theme.of(context).textTheme.body1,) // Here is the problem. Instead of settings defined in upper ThemeData, settings from theme.dart are applied. 
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Apps's main theme

import 'package:flutter/material.dart';

ThemeData theme() {
  return ThemeData(
    appBarTheme: AppBarTheme(
      color: Colors.blueGrey[700],
      textTheme: TextTheme(
        title: TextStyle(fontFamily: 'Ubuntu', fontSize: 25.0)
      )
    ),
    tabBarTheme: TabBarTheme(
      labelStyle: TextStyle(fontFamily: 'Ubuntu'),
      unselectedLabelStyle: TextStyle(fontFamily: 'Ubuntu')
    ),
    indicatorColor: Colors.blueGrey[200],
    scaffoldBackgroundColor: Colors.blueGrey[600],
    textTheme: TextTheme(
      title: TextStyle(fontFamily: 'Ubuntu', fontSize: 25.0, color: Colors.white),
      body1: TextStyle(fontFamily: 'Ubuntu', fontSize: 19.0, color: Colors.white),
      body2: TextStyle(fontFamily: 'Ubuntu', fontSize: 10.0, color: Colors.white)
    )
  );
}

enter image description here

Upvotes: 1

Views: 441

Answers (1)

Nilesh Senta
Nilesh Senta

Reputation: 5472

You can try below workarounds.

import 'package:flutter/material.dart';

class ClassicCouponScreen extends StatelessWidget {
  ThemeData _themeData = ThemeData(
      scaffoldBackgroundColor: Colors.red,
      textTheme: TextTheme(
          body1: TextStyle(color: Colors.blue) // These settings aren't applied, it doesn't work
      )
  );

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: _themeData,
      child: Scaffold(
        body: SafeArea(
          child: Container(
            padding: EdgeInsets.all(16.0),
            child: Column(
              children: [
                Text('Test', style: _themeData.textTheme.body1,) // Here is the problem. Instead of settings defined in upper ThemeData, settings from theme.dart are applied.
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Upvotes: 1

Related Questions