Flutter Widgets Introduction.







Let us understand the actual principle behind the development of the widgets and the various types of widgets available in the Flutter system. Let us test MyHomePage plugin for the Hello World application. The code for this is as shown below −



class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key);
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
        title: Text('Hello world Program by Nawab!'), 
      ),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4);
  }
}

We created a new widget here, by expanding StatelessWidget.


Notice that the StatelessWidget only includes the implementation of a single method construct in its derived class. The create method gets the context environment needed to build the widgets through the parameter BuildContext, and returns the widget that it creates.


We used title as one of the constructor arguments in the code, and also used key as another argument. The title is used to display the title, and Key is used in the build environment to identify the widget.


The build method here calls Scaffold's build method, which in turn calls AppBar and Center's build method for building their user interface.


Finally, the method of building the center calls the method of building the text.

The visual representation of the same is given below − for a better understanding.


Widget Build Visualization In Flutter , widgets can be grouped into multiple categories based on their features, as listed below −

  • Platform specific widgets

  • Layout widgets

  • State maintenance widgets

  • Platform independent / basic widgets

will discuss each in detail one by one in coming blog !!...

282 views
Never Miss a Post. Subscribe Now!

Contact Us: nawabblog@gmail.com

Location : Bangalore India.

© 2019 proudly created  by Nawab Ahmad. 

  • Nawab Ahmad
  • Grey Twitter Icon
  • Nawab Ahmad