This website or its third-party tools use cookies which are necessary to its functioning and required to improve your experience. By clicking the consent button, you agree to allow the site to use, collect and/or store cookies.
Please click the consent button to view this website.
I accept
Deny cookies Go Back

Mobile app tutorials

  • Home
  • About
  • Contact
  • Login
You are here: Home / flutter images / Flutter widget replace techniques

November 19, 2017 by nigel

Flutter widget replace techniques


 
The Flutter widget replace techniques introduction series describes the various methods of replacing and switching between widgets.

There is an equivalent Kotlin on Android series here. Which describes similar techniques for switching between Android fragments.

Flutter image download and display

flutter image download
The download and display image flutter development tutorial describes how to display an image from the network.
An instance of the network image constructor is created. Which both downloads and displays the image.
The image is also cached to local memory for improved performance when reloading the image.
An example of how to resize the image to fill the display is also provided.

Flutter popup menu

flutter popup menu
The flutter popup menu development tutorial describes how to add a popup menu for replacing image widgets.
The popup menu must be added to a Stateful widget.
Several network images are provided for the demonstration. The images will be downloaded prior to being displayed. Once the images have been downloaded, they will be available to local cache for faster reloading.
When a new image has been reloaded, the setChange method must be called for refreshing the display with the new widget.

Flutter drawer

flutter drawer
The flutter drawer development tutorial describes how to add a drawer to a flutter application.
The drawer can be accessed by either selecting the hamburger icon or swiping from left to right.
Once a new item has been selecteded the drawer must be closed by calling Navigator.pop(context).

Flutter BottomNavigationBar

flutter BottomNavigationBar
The flutter BottomNavigationBar tutorial describes how to replace image widgets using the BottomNavigationBar widget.
The BottomNavigationBar is displayed above the navigation icons for an Android device.
The BottomNavigationBar’s index is used for updating the BottomNavigationBar from either the popup menu or drawer.

Flutter TabBar

flutter TabBar
The flutter TabBar development tutorial describes how to implement the TabBar for replacing flutter widgets.
The TabBar will be displayed below the AppBar.
The flutter TabBar also provides swipe and animation support.
To support requests from the popup menu and drawer an index is added to the Photo class.

Conclusion

The first episode of the flutter development series described how to use the Image.network constructor for downloading and displaying an image.

The following episodes described the various interactive techniques for replacing an image widget. Included were the popup menu, drawer, BottomNavigationBar, and TabBar.

Synchronization was also added to the BottomNavigationBar and TabBar when replacing image widgets from the popup menu or drawer widgets.

Print Friendly

Filed Under: flutter images Tagged With: Display, Flutter, Flutter Development Widget, Menu, Menu Development, Widget

  • Facebook
  • Google+
  • Twitter
  • YouTube




Recent Forum Topics

  • Kotlin Fragments
  • Kotlin Camera2 API
  • HTTP Image Libraries

Recent Posts

  • Installing and running flutter
  • Kotlin Camera2 API MediaRecorder
  • Flutter IntelliJ Tips for Beginners
  • Migrating Fragments to Jetpack Navigation
  • Flutter TabBar

Recent Posts

  • Installing and running flutter
  • Kotlin Camera2 API MediaRecorder
  • Flutter IntelliJ Tips for Beginners
  • Migrating Fragments to Jetpack Navigation
  • Flutter TabBar

Search Form

  • Facebook
  • GitHub
  • Google+
  • Twitter
  • YouTube

© 2022 - WWW.MOBAPPTUTS.COM