build method
Describes the part of the user interface represented by this widget.
The framework calls this method when this widget is inserted into the tree in a given BuildContext and when the dependencies of this widget change (e.g., an InheritedWidget referenced by this widget changes). This method can potentially be called in every frame and should not have any side effects beyond building a widget.
The framework replaces the subtree below this widget with the widget returned by this method, either by updating the existing subtree or by removing the subtree and inflating a new subtree, depending on whether the widget returned by this method can update the root of the existing subtree, as determined by calling Widget.canUpdate.
Typically implementations return a newly created constellation of widgets that are configured with information from this widget's constructor and from the given BuildContext.
The given BuildContext contains information about the location in the tree at which this widget is being built. For example, the context provides the set of inherited widgets for this location in the tree. A given widget might be built with multiple different BuildContext arguments over time if the widget is moved around the tree or if the widget is inserted into the tree in multiple places at once.
The implementation of this method must only depend on:
- the fields of the widget, which themselves must not change over time, and
- any ambient state obtained from the
context
using BuildContext.dependOnInheritedWidgetOfExactType.
If a widget's build method is to depend on anything else, use a StatefulWidget instead.
See also:
- StatelessWidget, which contains the discussion on performance considerations.
Implementation
@override
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox.expand(
child: SingleChildScrollView(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Uniform padding
TwText('Uniform padding p(3)').p(3),
// Horizontal and vertical padding
TwText('Horizontal padding px(4)').px(4),
TwText('Vertical padding py(2)').py(2),
TwText('Both px and py').px(3).py(2),
// Individual directional padding
TwText('Left padding pl(5)').pl(5),
TwText('Right padding pr(3)').pr(3),
TwText('Top padding pt(2)').pt(2),
TwText('Bottom padding pb(4)').pb(4),
// Mixed combinations
TwText('Mixed: p(1) + px(4)').p(1).px(4),
TwText('Mixed: pl(2) + py(3)').pl(2).py(3),
TwText('Mixed: pt(1) + pr(3) + pb(2)').pt(1).pr(3).pb(2),
// Complex combinations
TwText('Complex: p(2) + pl(5) + pt(1)').p(2).pl(5).pt(1),
// Color examples (separate section) - using pb for spacing
TwText('Blue text').color('blue600').pb(5),
TwText('Red text').color('red600').pb(5),
TwText('Green text').color('green600').pb(5),
// Container examples - using pb for spacing
TwText('Container Examples:').color('gray800').pb(3),
// Basic containers with background colors
TwContainer(
child: TwText('Basic container with blue background').color('white'),
).bg('blue600').pb(4),
TwContainer(
child: TwText('Container with green background').color('white'),
).bg('green600').pb(2),
// Containers with padding
TwContainer(
child: TwText('Container with padding p(3)').color('white'),
).bg('red600').p(3).pb(2),
TwContainer(
child: TwText('Container with horizontal padding px(4)').color('white'),
).bg('purple600').px(4).pb(2),
// Containers with mixed padding
TwContainer(
child: TwText('Container with mixed padding').color('white'),
).bg('orange600').p(2).px(6).pb(2),
// Complex container example
TwContainer(
child: TwText('Complex: p(3) + px(2) + bg(teal600)').color('white'),
).p(3).px(2).bg('teal600').pb(2),
// Test with white color (now available)
TwContainer(
child: TwText('White background with black text').color('black'),
).bg('white').p(2).pb(2),
// Margin examples - using pb for spacing
TwText('Margin Examples:').color('gray800').pb(3),
// Basic margin
TwContainer(
child: TwText('Container with margin m(2)').color('white'),
).bg('blue600').p(2).m(2),
// Horizontal margin
TwContainer(
child: TwText('Container with horizontal margin mx(3)').color('white'),
).bg('green600').p(2).mx(3),
// Vertical margin
TwContainer(
child: TwText('Container with vertical margin my(1)').color('white'),
).bg('red600').p(2).my(1),
// Individual margins
TwContainer(
child: TwText('Container with left margin ml(4)').color('white'),
).bg('purple600').p(2).ml(4),
// Complex margin + padding + background
TwContainer(
child: TwText('Complex: m(1) + p(3) + bg(orange600)').color('white'),
).m(1).p(3).bg('orange600').pb(2),
// Border Radius Examples - using pb for spacing
TwText('Border Radius Examples:').color('gray800').pb(3),
// Uniform border radius
TwContainer(
child: TwText('rounded("sm") - 2px all corners').color('white'),
).bg('blue600').p(2).rounded('sm').pb(2),
TwContainer(
child: TwText('rounded("") - 4px all corners (default)').color('white'),
).bg('green600').p(2).rounded('').pb(2),
TwContainer(
child: TwText('rounded("lg") - 8px all corners').color('white'),
).bg('red600').p(2).rounded('lg').pb(2),
TwContainer(
child: TwText('rounded("xl") - 12px all corners').color('white'),
).bg('purple600').p(2).rounded('xl').pb(2),
TwContainer(
child: TwText('rounded("2xl") - 16px all corners').color('white'),
).bg('orange600').p(2).rounded('2xl').pb(2),
TwContainer(
child: TwText('rounded("full") - 9999px (circular)').color('white'),
).bg('teal600').p(2).rounded('full').pb(2),
// Directional border radius
TwText('Directional Border Radius:').color('gray800').pb(2),
TwContainer(
child: TwText('roundedT("lg") - 8px top corners').color('white'),
).bg('blue600').p(2).roundedT('lg').pb(2),
TwContainer(
child: TwText('roundedR("xl") - 12px right corners').color('white'),
).bg('green600').p(2).roundedR('xl').pb(2),
TwContainer(
child: TwText('roundedB("md") - 6px bottom corners').color('white'),
).bg('red600').p(2).roundedB('md').pb(2),
TwContainer(
child: TwText('roundedL("2xl") - 16px left corners').color('white'),
).bg('purple600').p(2).roundedL('2xl').pb(2),
// Individual corner border radius
TwText('Individual Corner Border Radius:').color('gray800').pb(2),
TwContainer(
child: TwText('roundedTl("xl") - 12px top-left').color('white'),
).bg('blue600').p(2).roundedTl('xl').pb(2),
TwContainer(
child: TwText('roundedTr("lg") - 8px top-right').color('white'),
).bg('green600').p(2).roundedTr('lg').pb(2),
TwContainer(
child: TwText('roundedBl("md") - 6px bottom-left').color('white'),
).bg('red600').p(2).roundedBl('md').pb(2),
TwContainer(
child: TwText('roundedBr("2xl") - 16px bottom-right').color('white'),
).bg('purple600').p(2).roundedBr('2xl').pb(2),
// Complex combinations
TwText('Complex Combinations:').color('gray800').pb(2),
TwContainer(
child: TwText('rounded("sm") + roundedT("lg")').color('white'),
).bg('blue600').p(2).rounded('sm').roundedT('lg').pb(2),
TwContainer(
child: TwText('roundedTl("xl") + roundedBr("2xl")').color('white'),
).bg('green600').p(2).roundedTl('xl').roundedBr('2xl').pb(2),
// Full example with padding, margin, color, and border radius
TwContainer(
child: TwText('Complete: p(3) + m(2) + bg(red600) + rounded("lg")').color('white'),
).p(3).m(2).bg('red600').rounded('lg').pb(2),
// Test error handling (uncomment to see error message)
// TwText('This will show an error').color('nonexistent'),
],
),
),
),
);
}