Flutter Material, Material Widget Tutorial

A piece of material. The Material widget is responsible for:

  • Shape

  • Border etc.

If any things apply to Material Widget it will effect the entire child.


Flutter Material, Material Widget useful inputs

  • child: Take Widget class

  • color: The color to paint the material. The Colors enum will apply here.

  • textStyle: The typographical style to use for text within this material.


Flutter Material, Material Widget example

Material(
  child: Text("Material Text"),
  color: Colors.black12,
  textStyle: TextStyle(
    fontSize: 16
  ),
);

Full codes example

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

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

class MaterialExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Material(
        child: SafeArea(
          child: Text("Material Text"),
        ),
        color: Colors.black12,
        textStyle: TextStyle(fontSize: 16),
      ),
    );
  }
}

Output

material-widget


References
Share