Implementing Material Design on Flutter

Flutter Tutorial Series #2: In this article, we’re going to implement the material design with your flutter app.

Since we don’t have any state for our current project.we need to create a StatelessWidget , which returns widgets of MaterialApp() also Scaffold() , AppBar() , Container()

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">FirstApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StatelessWidget</span> </span>{
  <span class="hljs-meta">@override</span>
  <span class="hljs-type">Widget</span> build(<span class="hljs-type">BuildContext</span> context) {
    <span class="hljs-keyword">return</span> <span class="hljs-type">MaterialApp</span>(home: <span class="hljs-type">Scaffold</span>(
      appBar: <span class="hljs-type">AppBar</span>( title: <span class="hljs-type">Text</span>(<span class="hljs-symbol">'My</span> <span class="hljs-type">First</span> <span class="hljs-type">Flutter</span> <span class="hljs-type">App</span>'),),
      body: <span class="hljs-type">Container</span>(
        child: <span class="hljs-type">Text</span>(<span class="hljs-symbol">'Hello</span> <span class="hljs-type">World</span>'),
      ),
    ),);
  }
}

then, we’re calling FirstApp() inside runApp()

void main() => runApp(<span class="hljs-name">FirstApp</span>())<span class="hljs-comment">;</span>

Final Source code ( main.dart )

<span class="hljs-keyword">import</span> <span class="hljs-symbol">'package</span>:flutter/material.dart';

void main() => runApp(<span class="hljs-type">FirstApp</span>());

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">FirstApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StatelessWidget</span> </span>{
  <span class="hljs-meta">@override</span>
  <span class="hljs-type">Widget</span> build(<span class="hljs-type">BuildContext</span> context) {
    <span class="hljs-keyword">return</span> <span class="hljs-type">MaterialApp</span>(home: <span class="hljs-type">Scaffold</span>(
      appBar: <span class="hljs-type">AppBar</span>( title: <span class="hljs-type">Text</span>(<span class="hljs-symbol">'My</span> <span class="hljs-type">First</span> <span class="hljs-type">Flutter</span> <span class="hljs-type">App</span>'),),
      body: <span class="hljs-type">Container</span>(
        child: <span class="hljs-type">Text</span>(<span class="hljs-symbol">'Hello</span> <span class="hljs-type">World</span>'),
      ),
    ),);
  }
}