{"id":762,"date":"2024-02-05T11:20:04","date_gmt":"2024-02-05T11:20:04","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=762"},"modified":"2024-02-05T11:20:07","modified_gmt":"2024-02-05T11:20:07","slug":"what-is-widgets-in-flutter","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/what-is-widgets-in-flutter\/","title":{"rendered":"What is widgets in Flutter?"},"content":{"rendered":"\n

Widgets: <\/strong>Each element on a screen of the Flutter app is a widget. The view of the screen completely depends upon the choice and sequence of the widgets used to build the apps. And the structure of the code of an apps is a tree of widgets. <\/p>\n\n\n\n

Category of Widgets:<\/strong><\/h3>\n\n\n\n

There are mainly 14 categories in which the flutter widgets are divided. They are mainly segregated on the basis of the functionality they provide in a flutter application.<\/p>\n\n\n\n

    \n
  1. Accessibility:<\/strong> These are the set of widgets that make a flutter app more easily accessible.<\/li>\n\n\n\n
  2. Animation and Motion:<\/strong> These widgets add animation to other widgets.<\/li>\n\n\n\n
  3. Assets, Images, and Icons:<\/strong> These widgets take charge of assets such as display images and show icons.<\/li>\n\n\n\n
  4. Async:<\/strong> These provide async functionality in the flutter application.<\/li>\n\n\n\n
  5. Basics:<\/strong> These are the bundle of widgets that are absolutely necessary for the development of any flutter application.<\/li>\n\n\n\n
  6. Cupertino:<\/strong> These are the iOS designed widgets.<\/li>\n\n\n\n
  7. Input:<\/strong> This set of widgets provides input functionality in a flutter application.<\/li>\n\n\n\n
  8. Interaction Models:<\/strong> These widgets are here to manage touch events and route users to different views in the application.<\/li>\n\n\n\n
  9. Layout:<\/strong> This bundle of widgets helps in placing the other widgets on the screen as needed.<\/li>\n\n\n\n
  10. Material Components:<\/strong> This is a set of widgets that mainly follow material design by Google.<\/li>\n\n\n\n
  11. Painting and effects:<\/strong> This is the set of widgets that apply visual changes to their child widgets without changing their layout or shape.<\/li>\n\n\n\n
  12. Scrolling:<\/strong> This provides scrollability of to a set of other widgets that are not scrollable by default.<\/li>\n\n\n\n
  13. Styling:<\/strong> This deals with the theme, responsiveness, and sizing of the app.<\/li>\n\n\n\n
  14. Text:<\/strong>\u00a0This displays text.<\/li>\n<\/ol>\n\n\n\n
    \n

    Types of Widgets:<\/strong><\/h3>\n\n\n\n

    There are broadly two types of widgets in the flutter: <\/p>\n\n\n\n

      \n
    1. Stateless Widget<\/li>\n\n\n\n
    2. Stateful Widget<\/li>\n<\/ol>\n\n\n\n

      <\/p>\n\n\n\n

      WIDGET<\/p>\n\n\n\n

      Description of the widgets used are as follows: <\/p>\n\n\n\n

        \n
      • Scaffold \u2013 Implements the basic material design visual layout structure.<\/li>\n\n\n\n
      • App-Bar \u2013 To create a bar at the top of the screen.<\/li>\n\n\n\n
      • Text – To write anything on the screen.<\/li>\n\n\n\n
      • Container \u2013 To contain any widget.<\/li>\n\n\n\n
      • Center \u2013 To provide center alignment to other widgets.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n
        \n

        Stateful Widget<\/h3>\n\n\n\n

        A Stateful Widget has state information. It contains mainly two classes: the\u00a0state object<\/strong>\u00a0and the\u00a0widget<\/strong>. It is dynamic because it can change the inner data during the widget lifetime. This widget does not have a\u00a0build()<\/strong>\u00a0method. It has\u00a0createState()<\/strong>\u00a0method, which returns a class that extends the Flutters State Class. The examples of the StatefulWidget are Checkbox, Radio, Slider, InkWell, Form, and TextField.<\/p>\n<\/div><\/div>\n\n\n\n

        class Car extends StatefulWidget {  \r\n  const Car({ Key key, this.title }) : super(key: key);   \r\n  \r\n  @override  \r\n  _CarState createState() => _CarState();  \r\n}  \r\n  \r\nclass _CarState extends State<Car> {  \r\n  @override  \r\n  Widget build(BuildContext context) {  \r\n    return Container(  \r\n      color: const Color(0xFEEFE),  \r\n           child: Container(  \r\n            child: Container( \/\/child: Container() )  \r\n        )  \r\n    );  \r\n  }  \r\n}  <\/code><\/pre>\n\n\n\n
        Stateless Widget<\/h3>\n\n\n\n
        The Stateless Widget does not have any state information. It remains static throughout its lifecycle. The examples of the Stateless Widget are Text, Row, Column, Container, etc.<\/p>\n\n\n\n
        class MyStatelessCarWidget extends StatelessWidget {  \r\n  const MyStatelessCarWidget ({ Key key }) : super(key: key);  \r\n  \r\n  @override  \r\n  Widget build(BuildContext context) {  \r\n    return Container(color: const Color(0x0xFEEFE));  \r\n  }  \r\n}  <\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
        Widgets: Each element on a screen of the Flutter app is a widget. The view of the screen completely depends upon<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-762","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/762","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=762"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/762\/revisions"}],"predecessor-version":[{"id":763,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/762\/revisions\/763"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}