13. More About Styling And Container.md

--> About Container

        ---------------------Margin-------------------------------
        |    ----------------Border-----------------------       |
        |    |    -----------Padding-----------------    |       |
        |    |    |   -------child(=content)------  |    |       |
        |    |   ------------Padding----------------     |       |
        |    ----------------Border-----------------------       |
        ---------------------Margin-------------------------------

-- Container() is invisible widget by default. thats basically wrap our childrens.

-- as above you can see that in the middle we have our child(with content) outside of it we have padding which is internal spacing you can call. outside of padding we have border if we add. outside of border we have margin which is called externally spacing.

#lib/question.dart
import 'package:flutter/material.dart';

class Question extends StatelessWidget {
  final String questionText;

  const Question({Key? key, required this.questionText}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.all(20),
      child: Text(
        questionText,
        style: TextStyle(fontSize: 20),
        textAlign: TextAlign.center,
      ),
    );
  }
}

-- in above example as you can see that container is wrapping Text() inside its child. -- we can use margin to give externally spacing. -- double.infinity property basically takes all available width of the screen. -- inside the Text() we can use style named-argument to style Text() with help of TextStyle(). -- textAlign can be used to align text.