Placeholder Flutter Last Updated : 08 Jun, 2025 Comments Improve Suggest changes Like Article Like Report Placeholder is a popular, inbuilt widget of the Flutter framework that creates an empty canvas/container on the screen to put content into, just like its name implies. It is analogous to both the placeholder attribute and the <div> tag of HTML. Almost all Flutter developers have reported using it at some point or another during their coding process. It serves as a foundational building block during the application development process within tight deadlines in the widget tree.Technical Description of Flutter's Placeholder WidgetThe Placeholder Widget is an inbuilt widget offered by the Flutter framework. It is used during the development process to create an empty container to showcase where the content (other widgets) will later go in, in order to indicate that the user interface is not yet complete. Thus, this is a useful feature beneficial for any developer to show their current work status/progress to their team lead when they have not yet completed developing the application.Constructor of PlaceholderPlaceholder Placeholder({ Key? key, Color color = const Color(0xFF455A64), double strokeWidth = 2.0, double fallbackWidth = 400.0, double fallbackHeight = 400.0, Widget? child,})Inbuilt Properties of the Placeholder WidgetPropertyDescriptionchildFixes the child widget of the Placeholder widget. Generally used to denote the widget/collection of widgets, if any, present inside the Placeholder widgetcolorProvides the color drawing of the placeholder box and its strokesfallBackHeightProvides the height of the placeholder box when it is in unbounded height constraintsfallBackWidthProvides the width of the placeholder box when it is in unbounded width constraintskeyControls how one widget replaces anotherstrokeWidthProvides the width of the strokes across the placeholder boxCode to use the placeholder widget in Flutter:Having a simple placeholder is fairly easy to build as per the steps given on the Placeholder Widget's Flutter Official Documentation. Dart Placeholder( strokeWidth: 1.0, color: Colors.indigoAccent, child: Container( padding: const EdgeInsets.all(20), child: const Text( "This is a placeholder", style: TextStyle(fontWeight: FontWeight.bold), )), ), For integration with the main code, the Placeholder widget code snippet needs to be added to the Scaffold. Here, a very basic Scaffold Design is taken for simplicity, with the maximum focus on the Placeholder Widget. Dart Scaffold( appBar: AppBar( title: const Text('Flutter Placeholder Widget Demo'), backgroundColor: Colors.green, foregroundColor: Colors.white, ), body: Center( child: Placeholder( strokeWidth: 1.0, color: Colors.indigoAccent, child: Container( padding: const EdgeInsets.all(20), child: const Text( "This is a placeholder", style: TextStyle(fontWeight: FontWeight.bold), ), ), ), ), ); The Flutter Placeholder has a very basic styling in this code, using a few of its inbuilt properties: strokeWidth, color, and child, as it will soon be replaced with the desired widget, thus serving as a placeholder for the time being.Complete Source Codemain.dart: Dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'GeeksforGeeks Localization', debugShowCheckedModeBanner: false, home: HomeScreen(), ); } } class HomeScreen extends StatefulWidget { const HomeScreen({super.key}); @override State<HomeScreen> createState() => _HomeScreenState(); } class _HomeScreenState extends State<HomeScreen> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter Placeholder Widget Demo'), backgroundColor: Colors.green, foregroundColor: Colors.white, ), body: Center( child: Placeholder( strokeWidth: 1.0, color: Colors.indigoAccent, child: Container( padding: const EdgeInsets.all(20), child: const Text( "This is a placeholder", style: TextStyle(fontWeight: FontWeight.bold), ), ), ), ), ); } } Output: Comment More infoAdvertise with us Next Article Flutter | An introduction to the open source SDK by Google L linisha Follow Improve Article Tags : Flutter Flutter Similar Reads BasicsFlutter TutorialThis Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework.Flutter is Google’s mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When7 min readFlutter | An introduction to the open source SDK by GoogleFlutter is Google’s Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter, everything is Widgets – the blocks with which the flutter apps are built. They are structural elements that ship with a bunch5 min readFlutter - Architecture ApplicationFlutter architecture application mainly consists of: WidgetsGesturesConcept of StateLayersWidgetsWidgets are the primary component of any flutter application. It acts as a UI for the user to interact with the application. Any flutter application is itself a widget that is made up of a combination of3 min readAndroid Studio Setup for Flutter DevelopmentThis article will show how to set up Android Studio to run Flutter Applications. Android Studio is one of the popular IDE( integrated development environment  ) developed by Google itself to create cross-platform Android applications. First, you have to install Android Studio version 3.0 or later, a3 min readGetting Started with Cross-Platform Mobile Application using FlutterFlutter is an open-source mobile application development SDK created by Google to develop cross-platform mobile applications. Flutter makes it extremely easy and fast for even novice programmers (computer programmers who are not experienced in any programming languages) to build high-quality and res7 min readFlutter Development in Ubuntu 20.04In this article, let's look at how you can set up a development environment for Flutter if you're using Ubuntu 20.04. It was difficult earlier and was kind of a nightmare to get it done. But now, it has changed, and anyone can easily set up a flutter development environment on their Ubuntu system in5 min readKey WidgetsWhat is Widgets in Flutter?Flutter is Google's UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets - The building block of Flutter applications. Widgets describe what their view should look like given their current configuration and5 min readContainer class in FlutterContainer class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets. A Container class can be used to store one or more widgets and position them on the screen according to our convenience. Basically, a container is like a box to store contents. A bas8 min readScaffold class in Flutter with ExamplesThe Scaffold is a class in flutter that provides many widgets or we can say APIs. The Scaffold will expand or occupy the whole available space in device screen .The class Hierarchy is as follows:Object ↳ Diagnosticable ↳ Diagnosticable Tree ↳ Widget ↳ StateFul Widget ↳ ScaffoldThe constructor of the8 min readMaterialApp class in FlutterMaterialApp Class: MaterialApp is a predefined class or widget in flutter. It is likely the main or core component of a flutter app. The MaterialApp widget provides a wrapper around other Material Widgets. We can access all the other components and widgets provided by Flutter SDK like Text widget, D7 min readDrawer Widget in FlutterDrawer widget is used to provide access to different destinations and functionalities provided in your application. It is represented by three horizontal parallel lines on the upper end of the scaffold. It has a horizontal movement from the edge of the Scaffold that navigates the link to different r5 min readFlutter - AppBar WidgetAppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a Flutter application are a widget or a combination of widgets. So AppBar is also a built-in class or widget in Flutter which give7 min readFlutter - RichText WidgetThe RichText widget is used to display text that uses various different styles. The displayed text is described using a tree of TextSpan objects, each of which has its own associated style that is used for that subtree. Depending on the layout constraints the text might break across multiple lines o3 min readUI ComponentsFlutter - TabsTabs are the part of the UI that navigates the user through different routes(ie, pages) when clicked upon. The use of tabs in applications is standard practice. Flutter provides a simple way to create tab layouts using the material library. In this article, we will be exploring the same in detail.To2 min readFlutter - Horizontal ListIn Flutter there can be Two types of lists, namely, horizontal list and vertical list. Both these lists are created using the ListView constructor and assigning the scrollDirection parameter. By default, the scroll direction parameter is vertical for a vertical list but it can be overridden by passi3 min readFlutter - Expansion Tile CardThe Expansion Tile Card works similarly to that of the Flutter SDK's standard expansion tile. But it uses the style used by Google itself in its products to raise a tile. It can be called a better version of the Flutter's ExpansionTileCard. In this article, we will look into the process of implement3 min readIcon Class in FlutterIcon class in Flutter is used to show specific icons in our app. Instead of creating an image for our icon, we can simply use the Icon class for inserting an icon in our app. For using this class you must ensure that you have set uses-material-design: true in the pubsec.yaml file of your object.Synt2 min readExpanded Class in FlutterWhen we create any child of a row or column we provide the size of the widget according to the screen size but sometimes when we provide more size of child as compared to screen size we get a warning and our widget goes out of the screen for resolving this we put a child of a row or column in an exp3 min readFlutter - DialogsThe dialog is a type of widget which comes on the window or the screen which contains any critical information or can ask for any decision. When a dialog box is popped up all the other functions get disabled until you close the dialog box or provide an answer. We use a dialog box for a different typ5 min readFlutter - Circular & Linear Progress IndicatorsProgress Indicator in any application displays the time which is needed for some tasks to complete such as downloading, installation, uploading, file transfer, etc. This shows the progress of a task or the time to display the length of the processes.In Flutter, progress can be displayed in two ways:4 min readFlutter - Staggered Grid ViewStaggered Grid View is a type of layout that is used to display images and posts. As you see in various social platforms such as Pinterest, Instagram and many more. The main feature of Staggered Grid View is that it makes the layout beautiful and develop a great User Experience. Staggered Grid View4 min readDesign & AnimationsCustomizing Fonts in FlutterCustomization is everywhere, from documents to apps, we can customize everything as we want to. The power of customization is humongous, and it has revolutionized the way we look at technology in this world. Just like how printing "Hello World", is the basic step towards learning a new programming l4 min readFlutter - Skeleton TextIn Flutter, the skeleton_text library is used to easily implement skeleton text loading animation. Its main application in a flutter app is to assure its users that the servers are working but running slow, but the content will eventually load. It also enhances the User Interface if the user connect3 min readFlutter - ThemesThemes are an integral part of UI for any application. Themes are used to design the fonts and colors of an application to make it more presentable. In Flutter, the Theme widget is used to add themes to an application. One can use it either for a particular part of the application like buttons and n3 min readFlutter - Lazy LoaderThe Lazy loader is a wrapper to the ScrollView that enables lazy loading. It is very useful in situations where the application's intent is to show endless content in a ListView. For instance, Instagram, Facebook, Youtube and most social networking platforms use them to deliver an endless stream of5 min readFlutter - UI OrientationAll applications should be able to adjust their User Interface (UI) based on the orientation of the phone. By orientation, we implicate the portrait and landscape mode in smartphones rather the physical orientation. In, Flutter it is done so by using the OrientationBuilder, which determines the app'2 min readFlutter - Animation in Route TransitionRoutes are simply Pages in Flutter applications. An application often needs to move from one page to another. However, animations can be used to make these transitions smoother. These animations can be used to curve or tween the Animation object of the PageRouteBuilder class to alter the transition3 min readFlutter - Physics Simulation in AnimationPhysics simulation in Flutter is a beautiful way to Animate components of the flutter app to make it look more realistic and interactive. These can be used to create a range of animations like falling objects due to gravity to making a container seem attached to a spring. In this article, we will ex4 min readFlutter - Radial Hero AnimationA Radial transformation means turning a circular shape into a square shape. In Radial Hero animation the same is done with a Hero. In Flutter, a Hero Widget is used to create a hero animation. A hero in this context refers to a widget that moves in between screens. This is one of the most fundamenta3 min readFlutter - Hinge AnimationAnimations are a big part of the Flutter application. It makes an app sweet to the eyes and equally user-friendly. In this article, we will discuss in detail the Hinge animations. In Flutter there are two ways to work with animations namely:A pub packageAnimated Builder WidgetIn this article, we wil4 min readFlutter - Lottie AnimationVisualization is an integral part of any application. Animations can highly glorify the UI of an app, but animations can be hectic to implement for an application. This is where the Lottie animation comes in. Lottie is a JSON-based animation file. It can be used both as a network asset and a static3 min readForms & GesturesForm Validation in FlutterForm Validation is an important part of every application. In the flutter application, there are many ways to validate form such as using a TextEditingController. But handling text controller for every Input can be messy in big applications. Hence, Form provides us a convenient way to validate user3 min readDesigning a Form Submission Page in FlutterThere are many ways to submit user-input data in Flutter. But the most used way is using TextFields. But there is a drawback of using TextFields it requires controller of the every text field you create in Flutter. So to Overcome makes the use of Forms. Forms in flutter don't need any textController3 min readFlutter - GesturesGestures are used to interact with an application. It is generally used in touch-based devices to physically interact with the application. It can be as simple as a single tap on the screen to a more complex physical interaction like swiping in a specific direction to scrolling down an application.3 min readNavigation & RoutingURLs in FlutterWhile surfing the net, every user will come across many buttons, text, etc., that would redirect the user to a different webpage in the same tab or in a different tab when clicked. In the same way, when a developer links a URL to a button or text in an app, the app will open the website when clicked5 min readRoutes and Navigator in FlutterRoute: Apps are the new trend. The number of apps available in the Play Store and App Store nowadays is quite a lot. The apps display their content in a full-screen container called pages or screens. In flutter, the pages or screens are called Routes. In android, these pages/screens are referred to4 min readFlutter - WebSocketsWebSockets are used to connect with the server just like the http package. It supports two-way communication with a server without polling.In this article, we will explore the below-listed topics related to WebSockets in Flutter:Connecting to a WebSocket serverListen to messages from the server.Send3 min readFlutter - Named RoutesAn app has to display multiple screens depending upon the user's needs. A user needs to back and forth from the multiple screens to the home screen. In, Flutter this is done with the help of Navigator.Note: In Flutter, screens and pages are called routes. Steps to Implement Named Routes in FlutterSt3 min readFlutter - Arguments in Named RoutesNavigating between the various routes (i.e, pages) of an application in Flutter is done with the use of Navigator. The Navigator uses a common identifier to transition between routes. One can pass arguments to these routes using the arguments parameter of Navigator.pushNamed() method. Arguments can4 min readMulti Page Applications in FlutterApps are widely used by humans in this techie world. The number of apps in the app store is increasing day by day. Due to this competition, app developers have started to add a number of features to their apps. To reduce this complexity, the content of the app is mostly divided into various pages so5 min readFlutter - Updating Data on the InternetIn today's world, most applications heavily rely on fetching and updating information from the servers through the internet. In Flutter, such services are provided by the http package. In this article, we will explore the same. Let's see a sample video of what we are going to develop.Sample Video:St5 min readFlutter - Fetching Data From the InternetIn today's world, most applications heavily rely on fetching information from the servers through the internet. In Flutter, such services are provided by the http package. In this article, we will explore this concept.Steps to Implement Data Fetching from the InternetStep 1 : Create a new flutter ap4 min readFlutter - Deleting Data On The InternetIn this article, we will explore the process of deleting data on the internet. Before deleting data on the internet, we will fetch the data first and then will delete the data.Steps to implement Deleting Data on the InternetStep 1 : Create a new flutter applicationCreate a new Flutter application us4 min readFlutter - Sending Data To The InternetInteracting with the Internet is crucial for most apps to function. In Flutter, sending data to the internet is one of them, and the http package is used to send the data to the internet. In this article, we will explore the same topic in detail. Steps to Implement Sending Data to the InternetStep 15 min readFlutter - Send Data to ScreenInteraction with the UI is an integral part of any application. But more often than not, the information needs to be sent from one screen to another. For instance, say you need to pass data regarding a selected or tapped component of the UI to another route(i.e., page). In this article, we will expl4 min readHardware InteractionGallery Access and Camera in FlutterWe can add images from the gallery using the image_picker package in Flutter. For this, you'll need to use your real device.Steps to Implement Gallery and Camera AccessStep 1: Create a new flutter applicationCreate a new Flutter application using the command Prompt. To create a new app, write the be3 min readCamera Access in FlutterTo add images from the camera in Flutter, we'll use the image_picker package. For this, you'll need to use your real device.Follow the below steps to display the images from the cameraStep 1: Create a new Flutter ApplicationCreate a new Flutter application using the command Prompt. To create a new a3 min readBackground local notifications in FlutterSometimes user wants some essential features like the latest news updates, latest articles updates, weather condition alert, complete his/her profile update, future events update and much more in his/ her Android or iOS device without opening App and if you would like to develop this kind of Android6 min readRestrict Landscape mode in FlutterIn this article, we'll learn how to restrict landscape mode in the flutter app. A production-ready app should be free from all sorts of bugs and errors. Mostly, we design our app for portrait orientation if we flip to landscape orientation, the UI might not be adjusted for that. So, there are two ca2 min readSample Flutter AppsBasic Quiz App In FlutterFlutter SDK is an open-source software development kit for building beautiful UI that is natively compiled. Currently, it is available as a stable version for iOS and Android OS. In this app, we are going to have the features or modules mentioned below:Five multiple-choice questions ( more questions8 min readA Hello World App using FlutterIn Flutter, everything is a Widget, and by using predefined widgets, one can create user-defined widgets just like using int, float, and double can create user-defined data types. In Flutter there are three types of widgetsStateless WidgetStateful WidgetInherited WidgetIn this article, we will use S3 min readFlutter - Simple PDF Generating AppFlutter Community has created several packages to work with PDFs in our apps. In this article, we will be creating a simple PDF-generating app. This application will convert plain text to PDF. The packages that we are going to need are listed below with their uses:pdf: It is a PDF creation library f9 min readFlutter - Magic 8 Ball AppWe will be building a Magic 8-Ball app that will give you the answers to all fun, tricky questions (basically, it is a fun game app that will change its state of image using Textbutton in Stateful widgets). For this, we will use Stateless and Stateful Flutter widgets and a Textbutton. Steps to build3 min readAdvance ConceptsFlutter - Read and Write Data on FirebaseFirebase helps developers to manage their mobile apps easily. It is a service provided by Google. Firebase has various functionalities available to help developers manage and grow their mobile apps. In this article, we will learn how to write and read data into/from Firebase. Follow the 3-step proce4 min readMail and SMS in FlutterThe world works in text. From advertisements to conversations, text is everywhere. The most popular modes of official textual communication are Mail followed by SMS. Companies use these modes to communicate not only with their employees but also with their customers. This has led app developers to i5 min readMaking Calls in FlutterIn this online world, customer care plays a major role in the success of a company. Users are quite satisfied when they converse with the executives through calls. This has forced companies to add phone numbers to their apps for their customers to contact them easily. But dialing those numbers from7 min readFAB - Speed Dial in FlutterA floating action button, commonly abbreviated as FAB, is a primary action button that has a fixed position hovering over an app without altering the contents of the screen. Speed dial is a transition type of FAB, where it emits multiple entities as an action of an FAB on the same screen.Floating Ac5 min readFlutter WakelockThe wakelock_plus package in Flutter is used to keep the screen awake. It can be adjusted according to the requirements (how long to stay awake). These are straightforward things that enhance the quality of the app and increase the user-friendliness of the same.In this article, we will explore the p3 min readHTTP GET Request in FlutterThere is no use of building a UI in Flutter until you integrate it with your backend. A GET request is used to extract useful data from your backend to use it in your application.Steps to implement HTTP GET RequestStep 1 : Create a new Flutter ApplicationCreate a new Flutter application using the co3 min read Like