{"id":67,"date":"2024-07-04T07:29:13","date_gmt":"2024-07-04T07:29:13","guid":{"rendered":"https:\/\/flutterfever.com\/news\/?p=67"},"modified":"2024-07-04T07:29:14","modified_gmt":"2024-07-04T07:29:14","slug":"essential-flutter-widgets-when-developing-mobile-app","status":"publish","type":"post","link":"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/","title":{"rendered":"Essential Flutter Widgets When Developing Mobile App"},"content":{"rendered":"\n

Flutter is a popular framework for building beautiful and engaging mobile apps. Learning about the core widgets is essential if you’re new to Flutter development. This article will introduce you to 2 essential Flutter widgets that you can use for every app that you create and also include the example code and demo app.<\/p>\n\n\n\n

\"\"
Essential Flutter Widgets When Developing Mobile App<\/figcaption><\/figure>\n\n\n\n

The Goals:<\/h3>\n\n\n\n
    \n
  1. Learning about Flutter development<\/li>\n\n\n\n
  2. Getting started with Essential Widget in Flutter<\/li>\n\n\n\n
  3. Can create an app using Widgets in Flutter<\/li>\n<\/ol>\n\n\n\n

    The Good Things:<\/h3>\n\n\n\n
      \n
    1. Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.<\/li>\n\n\n\n
    2. Flutter Widgets system gives more flexibility, able to combine multiple widgets<\/li>\n\n\n\n
    3. Flutter has a very active and large community base<\/li>\n<\/ol>\n\n\n\n

      The Challenges:<\/h3>\n\n\n\n
        \n
      1. When enter into Flutter for the first time, it is very confusing because as we know, Flutter is a collection of widgets, so it makes confused, but after knowing the flow we will be amazed.<\/li>\n\n\n\n
      2. need to learn and adapt to a new programming language, namely Dart<\/li>\n<\/ol>\n\n\n\n

        First of all, let’s talk about the 2 widgets that we will discuss<\/p>\n\n\n\n

        Bottom Navigation Bar<\/h3>\n\n\n\n

        The bottom navigation bar is a cool widget that has been given by the Flutter framework.<\/p>\n\n\n\n

        We can easily add a bottom navigation bar to the scaffold. In the scaffold, there is an attribute called bottom Navigation Bar and we can assign Bottom Navigation Bar for that. Inside the Bottom Navigation Bar class, we can define the navigation button’s behavior and what the buttons need to show inside the bar.<\/p>\n\n\n\n

        There are mainly two attributes that are very useful when considering Bottom Navigation Bar.<\/p>\n\n\n\n

        Key Considerations:<\/strong><\/p>\n\n\n\n

        type<\/em><\/strong>: This attribute governs the visual behavior of the buttons when tapped. Choose between:<\/p>\n\n\n\n

          \n
        • fixed<\/em><\/strong>:\u00a0Maintains a static appearance, ideal for a minimalist approach.<\/li>\n\n\n\n
        • shifting<\/em><\/strong>:\u00a0Introduces a subtle animation effect when a button is selected, enhancing user engagement.<\/li>\n<\/ul>\n\n\n\n

          items<\/em><\/strong>: This crucial property takes a list of BottomNavigationBarItem<\/em><\/strong> objects, each representing a single navigation button. You’ll need at least two items to provide users with sufficient navigation options.<\/p>\n\n\n\n

          For Customising Navigation Items, <\/strong>each BottomNavigationBarItem <\/em><\/strong>object is comprised of two essential attributes:<\/p>

          \r\n \r\n\t\t\t\t\t\t\t