how to create new text widget for flutter package?

Question

I need to create a custom text-widget in the Flutter. I have to change any color it accepts in the style with an opacity of 0.7. If it does not have a style, I have to show the color from the default style with an opacity of 0.7 .

My problem is creating a new text widget with the feature I described.

Answer 1

I could have used the widget Opacity very easily, but due to the Flutter document for Opacity Widget (resource) and the high cost of re-rendering the child, it was not necessary. The whole problem could be solved by DefaultTextStyle. You only need to pay attention to handling the context, which is documented in the code below.

Two modes are seen in the following code:

1- If TextStyle is not defined for your Text widget, it follows the default color at DefaultTextStyle.of.(context) or Theme and then manual Opacity value is also set.

2- If TextStyle is defined for your Text widget, it follows the defined color and its manual Opacity value is also set.

import 'package:flutter/material.dart';

const double OPACITY_VALUE = 0.7;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeWidget(),
    );
  }
}

class HomeWidget extends StatelessWidget {
  const HomeWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    /// ATTENTION: parent of this context is Material App  .
    return Scaffold(
      body: Center(
        child: Builder(builder: (context2) {
          /// context2 is important because referred to parent , and parent is Scaffold .
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              /// color and textStyle of this text widget referred to current Theme or DefaultTextStyle .
              Text(
                'You have pushed the button this many times:',
                style: DefaultTextStyle.of(context2).style.copyWith(
                    color: DefaultTextStyle.of(context2)
                        .style
                        .color!
                        .withOpacity(OPACITY_VALUE)),
              ),
              const CustomizedTextWidget(color: Colors.purple),
            ],
          );
        }),
      ),
    );
  }
}

class CustomizedTextWidget extends StatelessWidget {
  const CustomizedTextWidget({
    Key? key,
    required this.color,
  }) : super(key: key);
  final Color color;

  @override
  Widget build(BuildContext context) {
    return Text(
      '0',
      style: TextStyle(color: color, fontSize: 32)
          .copyWith(color: color.withOpacity(OPACITY_VALUE)),
    );
  }
}