29. Flutter Tutorial for Beginners – Change Font Style, Font Color, App Default Color

0
614

Step 1. Go to the following links:

https://pub.dev/packages/dynamic_theme#-installing-tab-

Step 2. Open your flutter project, then open pubspec.yml file

Step 3. Add dynamic theme dependencies to your package’s pubspec.yaml file

For example:

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  dynamic_theme: ^1.0.1

Step 4. Then click “Packages get”

Step 5. Import the package into your dart file.

import 'package:dynamic_theme/dynamic_theme.dart';

Step 6. Wrap your material widget like this:

DynamicTheme(
    defaultBrightness: Brightness.light,
    data: (brightness) => new ThemeData(
      primarySwatch: Colors.indigo,
      brightness: brightness,
    ),
    themedWidgetBuilder: (context, theme) {
      return new MaterialApp(
        title: 'Flutter Demo',
        theme: theme,
        home: new MyHomePage(title: 'Flutter Demo Home Page'),
      );
    }
)

And use the following code to change font color

void changeFontColor(BuildContext context, String color) async {
  Color fontColor;
  if (color == 'Orange') {
    fontColor = Colors.orange;
  } else if (color == 'Blue') {
    fontColor = Colors.blue;
  } else if (color == 'Red') {
    fontColor = Colors.red;
  } else if (color == 'Green') {
    fontColor = Colors.green;
  }
  DynamicTheme.of(context).setThemeData(new ThemeData(
      textTheme: TextTheme(
        body1: TextStyle(
            color: fontColor),
        body2: TextStyle(
            color: fontColor),
      )
  ));
}

To change font style in fluuter then add the font to your project. Follow the instruction to add the font into project.

First, create an assets directory into your project:

Right click on your project deirectory>New>Directory

Give the name as ‘assets’

After creating assets directory, copy the font file into assets folder.

Then open pubspec.yml, and add this code for your fonts.

fonts:
  - family: Raleway
    fonts:
      - asset: assets/Raleway-Regular.ttf
  - family: Lato
    fonts:
      - asset: assets/Lato-Regular.ttf
  - family: SourceSansPro
    fonts:
      - asset: assets/SourceSansPro-Regular.otf
  - family: Ubuntu
    fonts:
      - asset: assets/Ubuntu-R.ttf
  - family: Rubik
    fonts:
      - asset: assets/Rubik-Regular.ttf
  - family: Aller
    fonts:
      - asset: assets/Aller_Rg.ttf

Step 6. Then click “Packages get”

And use the following code to change font style

void changeFontStyle(BuildContext context, String fontName) async {
  
  DynamicTheme.of(context).setThemeData(new ThemeData(
      fontFamily: fontName,
  ));
}

Example:

RaisedButton(
  child: Text('Georgia'),
  onPressed: (){
    changeFontStyle(context, 'Georgia');
  }

Note: You can use shared preference to store all the changes.

Full example:

import 'package:flutter/material.dart';
import 'package:dynamic_theme/dynamic_theme.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new DynamicTheme(
        defaultBrightness: Brightness.light,
        data: (brightness) => new ThemeData(
          primarySwatch: Colors.indigo,
          brightness: brightness,
        ),
        themedWidgetBuilder: (context, theme) {
          return new MaterialApp(
            title: 'Flutter Demo',
            theme: theme,
            home: new MyHomePage(title: 'Flutter Demo Home Page'),
          );
        }
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State {

  void changeFontColor(BuildContext context, String color) async {
    Color fontColor;
    if (color == 'Orange') {
      fontColor = Colors.orange;
    } else if (color == 'Blue') {
      fontColor = Colors.blue;
    } else if (color == 'Red') {
      fontColor = Colors.red;
    } else if (color == 'Green') {
      fontColor = Colors.green;
    }
    DynamicTheme.of(context).setThemeData(new ThemeData(
        textTheme: TextTheme(
          body1: TextStyle(
              color: fontColor),
          body2: TextStyle(
              color: fontColor),
        )
    ));
  }

  void changeFontStyle(BuildContext context, String fontName) async {

    DynamicTheme.of(context).setThemeData(new ThemeData(
        fontFamily: fontName,
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            RaisedButton(
              child: Text('Orange'),
              onPressed: (){
                changeFontColor(context, 'Orange');
              },
            ),
            RaisedButton(
              child: Text('Blue'),
              onPressed: (){
                changeFontColor(context, 'Blue');
              },
            ),
            RaisedButton(
              child: Text('Red'),
              onPressed: (){
                changeFontColor(context, 'Red');
              },
            ),
            RaisedButton(
              child: Text('Green'),
              onPressed: (){
                changeFontColor(context, 'Green');
              },
            ),
            Text('Demo Text'),
            RaisedButton(
              child: Text('Ubuntu'),
              onPressed: (){
                changeFontStyle(context, 'Ubuntu');
              },
            ),
            RaisedButton(
              child: Text('Georgia'),
              onPressed: (){
                changeFontStyle(context, 'Georgia');
              },
            ),
            RaisedButton(
              child: Text('Raleway'),
              onPressed: (){
                changeFontStyle(context, 'Raleway');
              },
            ),
            RaisedButton(
              child: Text('Aller'),
              onPressed: (){
                changeFontStyle(context, 'Aller');
              },
            ),
          ],
        ),
      ),
    );
  }
}

LEAVE A REPLY

Please enter your comment!
Please enter your name here