{"id":2780,"date":"2024-05-17T17:31:48","date_gmt":"2024-05-17T12:01:48","guid":{"rendered":"https:\/\/nuventureconnect.com\/blog\/?p=2780"},"modified":"2026-01-21T16:13:08","modified_gmt":"2026-01-21T10:43:08","slug":"flutter-widgets-tutorial-advanced-ui-components","status":"publish","type":"post","link":"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/","title":{"rendered":"Mastering Advanced Flutter Widgets: Part 2 of the Beginner\u2019s Guide"},"content":{"rendered":"\n<p><strong>ListView:<\/strong><br>For you to create scrollable lists of widgets in your Flutter applications, the ListView widget is an essential building element. It effectively arranges the items in a vertical fashion, one after the other, making it possible for users to browse through a potentially enormous amount of data.<br><strong>Types of ListViews:<\/strong><\/p>\n\n\n\n<p>&nbsp;Flutter offers various ListView constructors to cater to different use cases:<\/p>\n\n\n\n<ul>\n<li><strong>ListView:<\/strong> Suitable for small lists where all items can be created upfront. It takes a list of Widgets as input.<\/li>\n\n\n\n<li><strong>ListView.builder:<\/strong> Ideal for large or infinite lists. It builds widgets on-demand as they become visible, improving performance and memory usage. Requires an IndexedWidgetBuilder function that constructs each list item.<\/li>\n\n\n\n<li><strong>ListView.separated:<\/strong> Similar to ListView.builder but allows you to add separators between list items. It takes two IndexedWidgetBuilder functions: one for items and another for separators.<\/li>\n\n\n\n<li><strong>ListView.custom:<\/strong> Provides the most flexibility for customization but requires a SliverChildDelegate to manage child model creation and sizing.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"418\" src=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture2.png\" alt=\"\" class=\"wp-image-2782\" srcset=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture2.png 720w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture2-300x174.png 300w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture2-600x348.png 600w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/figure><\/div>\n\n\n<p><br><br><\/p>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-layout-1 wp-block-group-is-layout-flex\"><div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"221\" height=\"339\" src=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture3.png\" alt=\"\" class=\"wp-image-2783\" srcset=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture3.png 221w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture3-196x300.png 196w\" sizes=\"(max-width: 221px) 100vw, 221px\" \/><\/figure><\/div>\n\n\n<ul>\n<li><strong>GridView:<\/strong><br><br>If you want to display items in a grid-like layout in Flutter, akin to a photo gallery or app icon layout, you should use the GridView widget. It presents information in a way that is both aesthetically pleasing and efficient with regard to space by arranging your content in a two-dimensional array of rows and columns.<br><br><\/li>\n<\/ul>\n<\/div>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br><\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Types of GridViews:<\/strong><\/p>\n\n\n\n<p>&nbsp;Flutter offers various GridView constructors to cater to different use cases:<\/p>\n\n\n\n<ul>\n<li><strong>GridView:<\/strong> Suitable for small grids where all items can be created upfront. It takes a list of Widgets as input.<\/li>\n\n\n\n<li><strong>GridView.builder:<\/strong> For huge or dynamic datasets, this is perfect. Like ListView.builder, it creates widgets as they are visible, and on-demand. Every grid item is constructed by the itemBuilder function.<\/li>\n\n\n\n<li><strong>GridView.count:<\/strong> This is the simplest and most common constructor. It specifies the exact number of columns (crossAxisCount) in the grid<\/li>\n\n\n\n<li><strong>GridView.extend:<\/strong> When you want items to have a maximum width (or height) but allow for some variation in their actual size, this constructor comes in handy. It makes sure that objects don&#8217;t go over the maxCrossAxisExtent value.<\/li>\n\n\n\n<li><strong>GridView.custom:<\/strong> This provides the most flexibility for customization but requires a SliverChildDelegate to manage how child widgets are created and sized.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"430\" src=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture4.png\" alt=\"\" class=\"wp-image-2784\" srcset=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture4.png 720w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture4-300x179.png 300w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture4-600x358.png 600w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/figure><\/div>\n\n\n<p><strong>Output<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"155\" height=\"250\" src=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture5.png\" alt=\"\" class=\"wp-image-2785\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Stack<\/strong><\/p>\n\n\n\n<p>Widgets can be layered on top of one another to create complex layouts with elements positioned at various depths.It&#8217;s particularly useful for building UIs that involve:<\/p>\n\n\n\n<ul>\n<li><strong>Overlapping elements:<\/strong> popups, floating menus, tooltips, or image carousels with captions.<\/li>\n\n\n\n<li><strong>Complex positioning:<\/strong> You can precisely control the placement of child widgets within the Stack using various properties.<br><br><strong>Key Concepts:<\/strong><\/li>\n\n\n\n<li><strong>Stack as a Container:<\/strong> The Stack itself acts as a container that holds its child widgets. It sizes itself to fit the largest non-positioned child.\n<ul>\n<li><strong>Positioned vs. Non-Positioned Children:<\/strong><\/li>\n\n\n\n<li><strong>Positioned Children:<\/strong> These have at least one non-null property (such as top, left, right, or bottom) and are encapsulated in a Positioned widget. This lets you specify precisely where they are in the Stack.<\/li>\n\n\n\n<li><strong>Non-Positioned Children:<\/strong> These are arranged according to the Stack&#8217;s alignment property, which in left-to-right environments defaults to top-left. Children in different positions can overlap<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Properties and Customization:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>alignment:<\/strong> Controls the alignment of non-positioned children within the Stack.<\/li>\n\n\n\n<li><strong>overflow:<\/strong> Defines how to handle content that overflows the Stack&#8217;s bounds (e.g., clip it or let it overflow).<\/li>\n\n\n\n<li><strong>fit:<\/strong> Determines how the Stack sizes itself based on its child widgets (e.g., StackFit.expand to fill available space).<\/li>\n<\/ul>\n\n\n\n<p>Example:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"524\" src=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture6.png\" alt=\"\" class=\"wp-image-2786\" style=\"width:720px;height:auto\" srcset=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture6.png 720w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture6-300x218.png 300w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture6-600x437.png 600w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/figure><\/div>\n\n\n<p><br><strong>Output:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group is-vertical is-content-justification-left is-layout-flex wp-container-core-group-layout-2 wp-block-group-is-layout-flex\"><div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"221\" height=\"199\" src=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture7.png\" alt=\"\" class=\"wp-image-2787\"\/><\/figure><\/div>\n\n\n<p><strong>Slider<\/strong> :<br>A flexible tool for letting users choose a value from a continuous range in Flutter is the Slider widget. It works perfectly for settings, modifications, or any situation where users must select a particular value between a specified minimum and maximum.<\/p>\n<\/div>\n\n\n\n<p><br><br><br><\/p>\n\n\n\n<ul>\n<li>Key Features:<br><br><ul><li><strong>Continuous Range:<\/strong> &nbsp;&nbsp;&nbsp;&nbsp; To choose any value within the designated range, users can slide their thumb along the track.<\/li><\/ul><ul><li><strong>Customization:<\/strong> You can control various aspects of the slider&#8217;s appearance, such as:<ul><li>Track color and thickness<\/li><\/ul><ul><li>Thumb color and size<\/li><\/ul><ul><li>Active and inactive track colors (indicating the selected range)<\/li><\/ul><ul><li>Divisions (markers for discrete values within the range, optional)<\/li><\/ul><ul><li>Labels (text displayed above or below the slider for specific values, optional)<br><br><\/li><\/ul><\/li><\/ul>\n<ul>\n<li><strong>Value Reporting:<\/strong> &nbsp;When the user modifies the slider&#8217;s value, the Slider widget&#8217;s callback function (onChanged) is activated. Based on the chosen value, you can use this function to update other areas of the user interface or state of your application.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><br>Example:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"453\" src=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture9.png\" alt=\"\" class=\"wp-image-2788\" style=\"width:718px;height:auto\" srcset=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture9.png 720w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture9-300x189.png 300w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture9-600x378.png 600w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/figure><\/div>\n\n\n<p>Output:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"221\" height=\"298\" src=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture10.png\" alt=\"\" class=\"wp-image-2789\"\/><\/figure>\n\n\n\n<ul>\n<li><strong>Checkbox<\/strong><br><br>A crucial component for developing user interfaces that let users select binary options (yes\/no, on\/off, true\/false), is the checkbox widget. It&#8217;s a well-known and simple control for a range of scenarios,<\/li>\n\n\n\n<li>Enabling\/disabling features<\/li>\n\n\n\n<li>Selecting or deselecting items in a list<\/li>\n\n\n\n<li>Confirming preferences (e.g., &#8220;Remember me&#8221; option)<\/li>\n<\/ul>\n\n\n\n<p>Key Features:<br><br><\/p>\n\n\n\n<ul>\n<li><strong>State Representation:<\/strong> The Checkbox holds a boolean value (true or false) that reflects its checked or unchecked state.<\/li>\n<\/ul>\n\n\n\n<p><strong>Visual Feedback:<\/strong> It displays a square box that changes its appearance based on its value:<ul><li>Unchecked: Typically, an empty square.<\/li><\/ul><ul><li>Checked: Typically, a filled-in square, often with a checkmark symbol.<br><br><\/li><\/ul><\/p>\n\n\n\n<p><strong>Customizability:<\/strong> You can control aspects like:<br><br><ul><li>Value: Set the initial and subsequent checked state.On-Change Callback: Define a function that gets called whenever the user changes the checkbox&#8217;s state.Active Color: Control the color of the checkmark when checked.<\/li><\/ul><\/p>\n\n\n\n<p><ul><li>Check Color: Control the color of the checkmark itself.<\/li><\/ul><\/p>\n\n\n\n<p>Example:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"432\" src=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture11.png\" alt=\"\" class=\"wp-image-2790\" srcset=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture11.png 720w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture11-300x180.png 300w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture11-600x360.png 600w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/figure><\/div>\n\n\n<p>Output:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"221\" height=\"137\" src=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture12.png\" alt=\"\" class=\"wp-image-2791\" style=\"width:250px;height:auto\"\/><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<p><strong>Radio<\/strong>:<br>To create radio buttons, which let users choose only one choice from a predetermined list of options that are mutually exclusive, the Radio widget is a necessary component. This well-known user interface element is perfect for situations where users must choose one choice from a range of options, such as:<\/p>\n\n\n\n<ul>\n<li>Selecting a preferred payment method.<\/li>\n<\/ul>\n\n\n\n<ul>\n<li>Choosing a size or color option.<\/li>\n<\/ul>\n\n\n\n<ul>\n<li>Answering a multiple-choice question with a single correct answer.<\/li>\n<\/ul>\n\n\n\n<p>Key Features:<\/p>\n\n\n\n<ul>\n<li><strong>Mutually Exclusive:<\/strong> To ensure that only one radio button can be selected at a time within the group, radio buttons are grouped together.<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>State Representation:<\/strong> Each Radio widget holds a boolean value (true or false) indicating its selected state.<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>Visual Feedback:<\/strong> Usually, it shows a circle outline that fills in when selected, giving a distinct visual cue<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>Customizability:<\/strong> You can control aspects like:<\/li>\n<\/ul>\n\n\n\n<ul>\n<li>Value: Set the value associated with the radio button.<\/li>\n<\/ul>\n\n\n\n<ul>\n<li>Group Value: Specify the group to which the radio button belongs (ensures only one within the group is selected).<\/li>\n<\/ul>\n\n\n\n<ul>\n<li>On-Change Callback: Create a function that is called each time the user presses the radio button, enabling you to take actions or update the state.<\/li>\n<\/ul>\n\n\n\n<ul>\n<li>Active Color: Control the color of the filled circle when selected.<\/li>\n<\/ul>\n\n\n\n<p>Example:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"699\" height=\"720\" src=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture16.png\" alt=\"\" class=\"wp-image-2793\" style=\"width:567px;height:auto\" srcset=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture16.png 699w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture16-291x300.png 291w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture16-600x618.png 600w\" sizes=\"(max-width: 699px) 100vw, 699px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Output:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"221\" height=\"92\" src=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture17.png\" alt=\"\" class=\"wp-image-2794\"\/><\/figure>\n\n\n\n<ul>\n<li><strong>Drawer<\/strong><\/li>\n<\/ul>\n\n\n\n<p>A key element in developing navigation menus that slide in horizontally from the screen&#8217;s edge is the Flutter Drawer widget. It&#8217;s a compact and Material Design-compliant method of granting access to different areas or features inside your application.<\/p>\n\n\n\n<ul>\n<li><strong>Drawer<\/strong><\/li>\n<\/ul>\n\n\n\n<p>A key element in developing navigation menus that slide in horizontally from the screen&#8217;s edge is the Flutter Drawer widget. It&#8217;s a compact and Material Design-compliant &nbsp;&nbsp;&nbsp;&nbsp; method of granting access to different areas or features inside your application.<\/p>\n\n\n\n<p>&nbsp;&nbsp; Key Features:<\/p>\n\n\n\n<ul>\n<li><strong>Horizontal Sliding Menu:<\/strong> Usually activated by a menu icon in the app bar, the Drawer appears as a panel that slides in from the left or right edge of the screen<\/li>\n\n\n\n<li><strong>Customizable Content:<\/strong> Any type of widget can be added to the drawer, giving you a lot of flexibility when it comes to displaying settings, options, navigation items, and even user data.<\/li>\n\n\n\n<li><strong>Navigation Integration: <\/strong>To direct users to different screens or areas of your app based on their choices made within the drawer, the drawer is frequently used in conjunction with a navigator.<\/li>\n<\/ul>\n\n\n\n<p><strong>Two Drawer Implementations:<\/strong><\/p>\n\n\n\n<p>Flutter offers two main approaches to using the Drawer:<\/p>\n\n\n\n<ul>\n<li><strong>Drawer with Scaffold<\/strong>: This is the most widely used and advised strategy. The main content of your app must be contained within a scaffold widget, and the drawer property must be set to a drawer widget that contains your navigation items.<\/li>\n\n\n\n<li><strong>Manual Drawer Management (Less Common)<\/strong>: This method entails making a distinct StatefulWidget just for the drawer and manually controlling its visibility state. It is less common, but for more complex use cases, it can be helpful.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><span lang=\"EN-US\" style=\"font-size:12.0pt;line-height:\n116%;font-family:&quot;Aptos&quot;,sans-serif;mso-ascii-theme-font:minor-latin;\nmso-fareast-font-family:&quot;Times New Roman&quot;;mso-fareast-theme-font:minor-fareast;\nmso-hansi-theme-font:minor-latin;mso-bidi-font-family:&quot;Times New Roman&quot;;\nmso-bidi-theme-font:minor-bidi;color:black;mso-themecolor:text1;mso-ansi-language:\nEN-US;mso-fareast-language:JA;mso-bidi-language:AR-SA\">Example:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"682\" height=\"634\" src=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture18.png\" alt=\"\" class=\"wp-image-2795\" style=\"width:542px;height:auto\" srcset=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture18.png 682w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture18-300x279.png 300w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture18-600x558.png 600w\" sizes=\"(max-width: 682px) 100vw, 682px\" \/><\/figure><\/div>\n\n\n<p>Output:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"217\" height=\"288\" src=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/Picture19.png\" alt=\"\" class=\"wp-image-2796\"\/><\/figure>\n\n\n\n<ul>\n<li><strong>BottomNavigationBar<\/strong><br><br>A useful method for adding a navigation bar to the bottom of the screen of your Flutter app is to use the BottomNavigationBar widget, a Material Design component. It&#8217;s perfect for letting users move between your application&#8217;s top-level views or sections with ease.<\/li>\n<\/ul>\n\n\n\n<p><strong>Key Characteristics:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Placement:<\/strong> Resides at the bottom of the screen, providing easy accessibility.<\/li>\n\n\n\n<li><strong>Items:<\/strong> consists of two to five elements, usually represented by icons with the opportunity to add text labels.<\/li>\n\n\n\n<li><strong>Selection:<\/strong> Allows users to select a single item at a time, triggering navigation to the corresponding view.<\/li>\n\n\n\n<li><strong>Accessibility:<\/strong> Ensure proper labels and semantics for users with disabilities.\n<ul>\n<li><strong>Number of Items:<\/strong> Usually, it is best to have three to five items for the easiest use.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Common Use Cases:<\/strong><\/p>\n\n\n\n<ul>\n<li>Applications with several screens that need users to switch between the main sections.\n<ul>\n<li>Tabbed interfaces where content is categorized and switching between categories is desired.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>By consolidating BottomNavigationBar viably, you&#8217;ll improve the client involvement of your Flutter application by giving instinctive and quick route between top-level sees.<\/p>\n\n\n\n<p><strong>Integration with Scaffold:<\/strong><\/p>\n\n\n\n<p>The BottomNavigationBar is usually used with the Scaffold widget, which gives a basic &nbsp;&nbsp;&nbsp; structure for many Flutter layouts. We can use the BottomNavigationBar widget in the &nbsp; Scaffold bottomNavigationBar property.<\/p>\n\n\n\n<p><strong>Customization:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Item Icons:<\/strong> Customize the icons in BottomNavigationBar by using the icon property for each BottomNavigationBarItem.<\/li>\n\n\n\n<li><strong>Item Text Labels:<\/strong> Use the title feature to include extra words for better understanding.<\/li>\n\n\n\n<li><strong>Selected Item Color:<\/strong> Change the color of the chosen item using the selectedItemColor setting.\n<ul>\n<li><strong>Unselected Item Color:<\/strong> Change the color of items that are not selected using the unselectedItemColor property.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>Type:<\/strong> Change the type of the Bottom Navigation Bar to &#8220;fixed&#8221; if there are less than four items, or &#8220;shifting&#8221; for a fancy animation effect when switching items.<\/li>\n\n\n\n<li><strong>Conclusion:<\/strong><\/li>\n<\/ul>\n\n\n\n<p>By using ListView, GridView, Stack, Slider, Checkbox, Radio, Drawer, BottomNavigationBar widgets we can create simple screens like :<\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"761\" height=\"562\" src=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/image-1.png\" alt=\"\" class=\"wp-image-2797\" style=\"width:634px;height:auto\" srcset=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/image-1.png 761w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/image-1-300x222.png 300w, https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/image-1-600x443.png 600w\" sizes=\"(max-width: 761px) 100vw, 761px\" \/><\/figure><\/div>\n\n\n<p><br><br><\/p>\n\n\n\n<p>As one of the best IT staff augmentation companies, Nuventure&#8217;s dedication is to promoting creative and efficient mobile app development by utilizing the most recent technological developments. <a href=\"https:\/\/nuventureconnect.com\/hire-us\/\">Hire the remote mobile developers through our portal<\/a>, <a href=\"https:\/\/app.apollo.io\/#\/meet\/al6-opq-rql\/hire-nuventure-intro\">book a call<\/a> for further enquiries<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><br><br><\/p>\n\n\n\n<p><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p><br><br><\/p>\n\n\n\n<p><br><br><\/p>\n\n\n\n<p><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>ListView:For you to create scrollable lists of widgets in your Flutter applications, the ListView widget is an essential building element. It effectively arranges the items in a vertical fashion, one after the other, making it possible for users to browse through a potentially enormous amount of data.Types of ListViews: &nbsp;Flutter offers various ListView constructors to [&hellip;]<\/p>\n","protected":false},"author":110,"featured_media":2798,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[168,26],"tags":[169,5,60],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Flutter Widgets Tutorial: Advanced UI Components for Beginners<\/title>\n<meta name=\"description\" content=\"Learn advanced Flutter widgets like ListView, GridView, Stack, Drawer and BottomNavigationBar with clear examples in this beginner-friendly tutorial.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter Widgets Tutorial: Advanced UI Components for Beginners\" \/>\n<meta property=\"og:description\" content=\"Learn advanced Flutter widgets like ListView, GridView, Stack, Drawer and BottomNavigationBar with clear examples in this beginner-friendly tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Nuventure Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/nuventureco\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-17T12:01:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-21T10:43:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/MicrosoftTeams-image-320.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1158\" \/>\n\t<meta property=\"og:image:height\" content=\"653\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tharique Mohammed\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nuventureco\" \/>\n<meta name=\"twitter:site\" content=\"@nuventureco\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tharique Mohammed\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/\"},\"author\":{\"name\":\"Tharique Mohammed\",\"@id\":\"https:\/\/nuventureconnect.com\/blog\/#\/schema\/person\/023ae5e55e347160014b25277b2a0f1e\"},\"headline\":\"Mastering Advanced Flutter Widgets: Part 2 of the Beginner\u2019s Guide\",\"datePublished\":\"2024-05-17T12:01:48+00:00\",\"dateModified\":\"2026-01-21T10:43:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/\"},\"wordCount\":1769,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/nuventureconnect.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/MicrosoftTeams-image-320.png\",\"keywords\":[\"Flutter\",\"Tech\",\"Technology\"],\"articleSection\":[\"Flutter\",\"Programming\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/\",\"url\":\"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/\",\"name\":\"Flutter Widgets Tutorial: Advanced UI Components for Beginners\",\"isPartOf\":{\"@id\":\"https:\/\/nuventureconnect.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/MicrosoftTeams-image-320.png\",\"datePublished\":\"2024-05-17T12:01:48+00:00\",\"dateModified\":\"2026-01-21T10:43:08+00:00\",\"description\":\"Learn advanced Flutter widgets like ListView, GridView, Stack, Drawer and BottomNavigationBar with clear examples in this beginner-friendly tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/#primaryimage\",\"url\":\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/MicrosoftTeams-image-320.png\",\"contentUrl\":\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/MicrosoftTeams-image-320.png\",\"width\":1158,\"height\":653,\"caption\":\"Advanced Flutter Widgets Tutorial: ListView, GridView, Stack and More\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/nuventureconnect.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mastering Advanced Flutter Widgets: Part 2 of the Beginner\u2019s Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/nuventureconnect.com\/blog\/#website\",\"url\":\"https:\/\/nuventureconnect.com\/blog\/\",\"name\":\"Nuventure Blog\",\"description\":\"Knowledge.transmit!\",\"publisher\":{\"@id\":\"https:\/\/nuventureconnect.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/nuventureconnect.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/nuventureconnect.com\/blog\/#organization\",\"name\":\"Nuventure Connect Private Limited\",\"url\":\"https:\/\/nuventureconnect.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/nuventureconnect.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2023\/03\/logo-main-with-cartion-1.webp\",\"contentUrl\":\"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2023\/03\/logo-main-with-cartion-1.webp\",\"width\":200,\"height\":89,\"caption\":\"Nuventure Connect Private Limited\"},\"image\":{\"@id\":\"https:\/\/nuventureconnect.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/nuventureco\/\",\"https:\/\/x.com\/nuventureco\",\"https:\/\/www.instagram.com\/nuventure\/\",\"https:\/\/in.linkedin.com\/company\/nuventure\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/nuventureconnect.com\/blog\/#\/schema\/person\/023ae5e55e347160014b25277b2a0f1e\",\"name\":\"Tharique Mohammed\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/nuventureconnect.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/43194013fbbe5312eaff08f754d4cf99?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/43194013fbbe5312eaff08f754d4cf99?s=96&r=g\",\"caption\":\"Tharique Mohammed\"},\"url\":\"https:\/\/nuventureconnect.com\/blog\/author\/tharique-mohammed\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flutter Widgets Tutorial: Advanced UI Components for Beginners","description":"Learn advanced Flutter widgets like ListView, GridView, Stack, Drawer and BottomNavigationBar with clear examples in this beginner-friendly tutorial.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/","og_locale":"en_US","og_type":"article","og_title":"Flutter Widgets Tutorial: Advanced UI Components for Beginners","og_description":"Learn advanced Flutter widgets like ListView, GridView, Stack, Drawer and BottomNavigationBar with clear examples in this beginner-friendly tutorial.","og_url":"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/","og_site_name":"Nuventure Blog","article_publisher":"https:\/\/www.facebook.com\/nuventureco\/","article_published_time":"2024-05-17T12:01:48+00:00","article_modified_time":"2026-01-21T10:43:08+00:00","og_image":[{"width":1158,"height":653,"url":"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/MicrosoftTeams-image-320.png","type":"image\/png"}],"author":"Tharique Mohammed","twitter_card":"summary_large_image","twitter_creator":"@nuventureco","twitter_site":"@nuventureco","twitter_misc":{"Written by":"Tharique Mohammed","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/#article","isPartOf":{"@id":"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/"},"author":{"name":"Tharique Mohammed","@id":"https:\/\/nuventureconnect.com\/blog\/#\/schema\/person\/023ae5e55e347160014b25277b2a0f1e"},"headline":"Mastering Advanced Flutter Widgets: Part 2 of the Beginner\u2019s Guide","datePublished":"2024-05-17T12:01:48+00:00","dateModified":"2026-01-21T10:43:08+00:00","mainEntityOfPage":{"@id":"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/"},"wordCount":1769,"commentCount":0,"publisher":{"@id":"https:\/\/nuventureconnect.com\/blog\/#organization"},"image":{"@id":"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/#primaryimage"},"thumbnailUrl":"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/MicrosoftTeams-image-320.png","keywords":["Flutter","Tech","Technology"],"articleSection":["Flutter","Programming"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/","url":"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/","name":"Flutter Widgets Tutorial: Advanced UI Components for Beginners","isPartOf":{"@id":"https:\/\/nuventureconnect.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/#primaryimage"},"image":{"@id":"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/#primaryimage"},"thumbnailUrl":"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/MicrosoftTeams-image-320.png","datePublished":"2024-05-17T12:01:48+00:00","dateModified":"2026-01-21T10:43:08+00:00","description":"Learn advanced Flutter widgets like ListView, GridView, Stack, Drawer and BottomNavigationBar with clear examples in this beginner-friendly tutorial.","breadcrumb":{"@id":"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/#primaryimage","url":"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/MicrosoftTeams-image-320.png","contentUrl":"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2024\/05\/MicrosoftTeams-image-320.png","width":1158,"height":653,"caption":"Advanced Flutter Widgets Tutorial: ListView, GridView, Stack and More"},{"@type":"BreadcrumbList","@id":"https:\/\/nuventureconnect.com\/blog\/2024\/05\/17\/flutter-widgets-tutorial-advanced-ui-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/nuventureconnect.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mastering Advanced Flutter Widgets: Part 2 of the Beginner\u2019s Guide"}]},{"@type":"WebSite","@id":"https:\/\/nuventureconnect.com\/blog\/#website","url":"https:\/\/nuventureconnect.com\/blog\/","name":"Nuventure Blog","description":"Knowledge.transmit!","publisher":{"@id":"https:\/\/nuventureconnect.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nuventureconnect.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/nuventureconnect.com\/blog\/#organization","name":"Nuventure Connect Private Limited","url":"https:\/\/nuventureconnect.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nuventureconnect.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2023\/03\/logo-main-with-cartion-1.webp","contentUrl":"https:\/\/nuventureconnect.com\/blog\/wp-content\/uploads\/2023\/03\/logo-main-with-cartion-1.webp","width":200,"height":89,"caption":"Nuventure Connect Private Limited"},"image":{"@id":"https:\/\/nuventureconnect.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/nuventureco\/","https:\/\/x.com\/nuventureco","https:\/\/www.instagram.com\/nuventure\/","https:\/\/in.linkedin.com\/company\/nuventure"]},{"@type":"Person","@id":"https:\/\/nuventureconnect.com\/blog\/#\/schema\/person\/023ae5e55e347160014b25277b2a0f1e","name":"Tharique Mohammed","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nuventureconnect.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/43194013fbbe5312eaff08f754d4cf99?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/43194013fbbe5312eaff08f754d4cf99?s=96&r=g","caption":"Tharique Mohammed"},"url":"https:\/\/nuventureconnect.com\/blog\/author\/tharique-mohammed\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/nuventureconnect.com\/blog\/wp-json\/wp\/v2\/posts\/2780"}],"collection":[{"href":"https:\/\/nuventureconnect.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nuventureconnect.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nuventureconnect.com\/blog\/wp-json\/wp\/v2\/users\/110"}],"replies":[{"embeddable":true,"href":"https:\/\/nuventureconnect.com\/blog\/wp-json\/wp\/v2\/comments?post=2780"}],"version-history":[{"count":14,"href":"https:\/\/nuventureconnect.com\/blog\/wp-json\/wp\/v2\/posts\/2780\/revisions"}],"predecessor-version":[{"id":2826,"href":"https:\/\/nuventureconnect.com\/blog\/wp-json\/wp\/v2\/posts\/2780\/revisions\/2826"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nuventureconnect.com\/blog\/wp-json\/wp\/v2\/media\/2798"}],"wp:attachment":[{"href":"https:\/\/nuventureconnect.com\/blog\/wp-json\/wp\/v2\/media?parent=2780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nuventureconnect.com\/blog\/wp-json\/wp\/v2\/categories?post=2780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nuventureconnect.com\/blog\/wp-json\/wp\/v2\/tags?post=2780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}