a same way to style all widgets in flutter

Style on text field and button are applied differently.

For example:

On text field style is applied like

style: TextStyle(color: icolor)

On button style is applied like

style: ElevatedButton.styleFrom({primary: icolor}),

I was trying if a container style can be applied to a widget inside but that does not work.

Is there a common syntax to style each widget?

Thanks!

Solution 1: Krunal Nizama

You can create your custom text or button.

For example, you can create custom Text as below:

import 'package:flutter/material.dart';

class CustomText extends StatelessWidget {
  final String data;
  final Color? textColor;
  final double? fontSize;
  final FontWeight? fontWeight;
  final String? fontFamily;

  CustomText(
    this.data, {
    this.textColor,
    this.fontSize,
    this.fontWeight,
    this.fontFamily,
  });

  @override
  Widget build(BuildContext context) {
    return Text(
      data,
      style: TextStyle(
        color: textColor ?? Colors.black,
        fontSize: fontSize ?? 20,
        fontWeight: fontWeight,
        fontFamily: fontFamily ?? 'regular',
      ),
    );
  }
}

Then you can use CustomText("any value"). Same way you can crete your button class so you don't need to define styles every time.

Solution 2: pranav malayil

Create a common widget class so that you can use it everywhere

Solution 3: Babiosik

Use Theme and Theme data in MaterialApp widget or as independent. More in official docs

MaterialApp(
  title: appName,
  theme: ThemeData(
    // Define the default brightness and colors.
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],

    // Define the default font family.
    fontFamily: 'Georgia',

    // Define the default `TextTheme`. Use this to specify the default
    // text styling for headlines, titles, bodies of text, and more.
    textTheme: const TextTheme(
      headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
      bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
    ),
  ),
  home: const MyHomePage(
    title: appName,
  ),
);

MaterialApp set global theme and this theme is auto applied to all app. Also you can create static ThemeData if you do not want use Theme.of(context). But usually create widgets that create the right widgets with a suitable theme as it is easier.

class MyText extends StatelessWidget {
  const MyText({Key? key, required this.text}) : super(key: key);
  final String text;
  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: TextStyle(color: Colors.red),
    );
  }
}