GWT - FlowPanel Widget



The FlowPanel widget represents a panel that formats its child widgets using the default HTML layout behavior.

Class Declaration

Following is the declaration for class −

public class FlowPanel
   extends ComplexPanel
      implements InsertPanel.ForIsWidget

Class Constructors

Sr.No. Constructor & Description


Constructor for empty Flow Panel.

Class Methods

Sr.No. Function name & Description

void add(Widget w)

Adds a new child widget to the panel.


void clear()

Removes all child widgets.


void insert(IsWidget w, int beforeIndex)


void insert(Widget w, int beforeIndex)

Inserts a widget before the specified index.

Methods Inherited

This class inherits methods from the following classes −





  • java.lang.Object

FlowPanel Widget Example

This example will take you through simple steps to show usage of a FlowPanel Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter −

Step Description
1 Create a project with a name HelloWorld under a package com.tutorialspoint as explained in the GWT - Create Application chapter.
2 Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and as explained below. Keep rest of the files unchanged.
3 Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptor src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = ''/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = ''/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>


Following is the content of the modified Style Sheet file war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;

.gwt-CheckBox {
   margin: 10px;	

Following is the content of the modified HTML host file war/HelloWorld.html.

      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">

      <h1>FlowPanel Widget Demonstration</h1>
      <div id = "gwtContainer"></div>

Let us have following content of Java file src/com.tutorialspoint/ which will demonstrate use of FlowPanel widget.

package com.tutorialspoint.client;


public class HelloWorld implements EntryPoint {

   public void onModuleLoad() {
      // Create a flow panel			
      FlowPanel flowPanel = new FlowPanel();

      // Add CheckBoxes to flow Panel
      for(int i = 1;  i <= 10; i++){
         CheckBox checkBox = new CheckBox("Item" + i);

      DecoratorPanel decoratorPanel = new DecoratorPanel();

      // Add the widgets to the root panel.

Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, this will produce following result −

GWT FlowPanel Widget