Manipulating position and size: Applying a linear gradient

  • To apply a linear gradient to a widget’s background, nest it in a Container widget.
  • Then use the Container widget’s decoration property to create a BoxDecoration object, and use BoxDecoration’s gradient property to transform the background fill.
  • Vertical gradient. 
    Var container = Container( // grey box
  child: Center(
    child: Container( // red box
      child: Text(
        "Lorem ipsum",
        style: bold24Roboto,
      ),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: const Alignment(0.0, -1.0),
          end: const Alignment(0.0, 0.6),
          colors: <Color>[
            const Color(0xffef5350),
            const Color(0x00ef5350)
          ],
        ),
      ), 
      padding: EdgeInsets.all(16),
    ),
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);
  • Horizontal gradient. 
    Var container = Container( // grey box
  child: Center(
    child: Container( // red box
      child: Text(
        "Lorem ipsum",
        style: bold24Roboto,
      ),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: const Alignment(-1.0, 0.0),
          end: const Alignment(0.6, 0.0),
          colors: <Color>[
            const Color(0xffef5350),
            const Color(0x00ef5350)
          ],
        ),
      ), 
      padding: EdgeInsets.all(16),
    ),
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

Related concepts

→
Applying a linear gradient

Manipulating position and size: Applying a linear gradient — Structure map

Clickable & Draggable!

Manipulating position and size: Applying a linear gradient — Related pages:

Flutter for web developers