title: How to reuse widget styles properly in flutter?
body: <p>Coming from frontend webframeworks like angular, react and vue I am struggling to find the best way to write reusable widget styles. Let me demonstrate the problem with an example.</p>
  
  <p>Lets say we have this Widget:</p>
  
  <pre><code>Container(
    width: 25,
    height: 10,
    decoration: BoxDecoration(
      color: const Color(0xff7c94b6),
      border: Border.all(
        color: Colors.black,
        width: 8.0,
        ),
      ),
    child: /* some custom widget */,
  );
  </code></pre>
  
  <p>Now lets say I want to make the <code>Container</code> properties like <code>width</code>, <code>height</code> etc. changable by parameters. If a certain parameter for a property is not passed it should use its default value, like this:</p>
  
  <pre><code>class CustomWidget extends StatelessWidget {
    final double width;
    final double height;
    final BoxDecoration decoration;
  
    const CustomWidget ({
      Key key,
      this.width = 25,
      this.height = 10,
      this.decoration = /* default decoration */
      /* possibly even more properties */
    }) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Container(
        width: width,
        height: height,
        decoration: decoration,
        child: /* some custom widget */
    }
  }
  </code></pre>
  
  <p>Obviously, there could be more properties which would lead to more and more boilerplate. Also what do you do, if the container does not have a decoration by default? Should you pass a custom Container always? Also consider that the Container could be nested further down the widget tree.</p>
  
  <p>There must be a good solution, I just can't think of one, probably because my thoughts are biased because of my experience with frontend development. In web project you simply pass the component/widget custom css-classes to overwrite the styles (e.g. a parameter <code>containerClasses</code>). How do you do it properly in flutter?</p>
  
  <p><strong>EDIT:</strong> In essence my question is: Is there an equivalent to a css-class in flutter? Or: Whats the best way to make a custom widget's style totally customizable by parameters. I feel like i have to write every single property by hand. </p>
  
  <p>In react you have an interface for all html elements  (e.g. <code>div</code>, <code>input</code> etc.) and their props (e.g. for an <code>input</code>-element you have an interface with <code>value</code>, <code>class</code>, <code>type</code> etc.), which you can use to define what parameters one can pass to customize the component/widget.</p>