What is FlowPane Layout in JavaFX

In this JavaFX tutorial we are going to learn What is FlowPane Layout in JavaFX, so

FlowPane lays out its children in a flow that wraps at the flowpane’s boundary.

a horizontal flowpane (the default) will layout nodes in rows, wrapping at the flowpane’s

width. a vertical flowpane lays out nodes in columns, wrapping at the flowpane’s height.

Also you can check Python GUI Development Tutorials in the below link.

1: PyQt5 GUI Development Tutorials

2: TKinter GUI Development Tutorials

3: Pyside2 GUI Development Tutorials

4: Kivy GUI Development Tutorials

5: wxPython GUI Development Tutorials

Learn How to Draw Text in JavaFX.

You can create FlowPane layout or container by creating the object of FlowPane class like this.

 FlowPane flowPane = new FlowPane();

1	FlowPane flowPane = new FlowPane();

So now this is the complete source code for What is FlowPane Layout in JavaFX

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class FlowPaneLayout extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) {

        stage.setTitle("Flow Pane Layout");

        FlowPane flowPane = new FlowPane();

        flowPane.setVgap(30);

        Scene scene = new Scene(flowPane, 300,100);

        Button btn1 = new Button("Button 1");
        Button btn2 = new Button("Button 2");
        Button btn3 = new Button("Button 3");
        Button btn4 = new Button("Button 4");

        flowPane.getChildren().add(btn1);
        flowPane.getChildren().add(btn2);
        flowPane.getChildren().add(btn3);
        flowPane.getChildren().add(btn4);

        stage.setScene(scene);
        stage.show();





    }
}

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.layout.FlowPane;

import javafx.stage.Stage;

public class FlowPaneLayout extends Application {

public static void main(String[] args) {

launch(args);

}

@Override

public void start(Stage stage) {

stage.setTitle("Flow Pane Layout");

FlowPane flowPane = new FlowPane();

flowPane.setVgap(30);

Scene scene = new Scene(flowPane, 300,100);

Button btn1 = new Button("Button 1");

Button btn2 = new Button("Button 2");

Button btn3 = new Button("Button 3");

Button btn4 = new Button("Button 4");

flowPane.getChildren().add(btn1);

flowPane.getChildren().add(btn2);

flowPane.getChildren().add(btn3);

flowPane.getChildren().add(btn4);

stage.setScene(scene);

stage.show();

}

Every JavaFX application should have a container, a container is like layout. as we

have created a FlowPane container in the above code.

FlowPane flowPane = new FlowPane();

1	FlowPane flowPane = new FlowPane();

If you want to give vertical gap in the FlowPane layout, you can use this line of code.

flowPane.setVgap(30);

1	flowPane.setVgap(30);

Also for every JavaFX application we need to create a Scene object. in the scene we need

to add our container with the width and height of the window, if you want to colorize your

window, you can do it in here. you can see that we have given 300 width and 100 height for the

window.

Scene scene = new Scene(flowPane, 300,100);

1	Scene scene = new Scene(flowPane, 300,100);

These are the buttons that we want to add in our FlowPane Layout.

 Button btn1 = new Button("Button 1");
 Button btn2 = new Button("Button 2");
 Button btn3 = new Button("Button 3");
 Button btn4 = new Button("Button 4");

Button btn1 = new Button("Button 1");

Button btn2 = new Button("Button 2");

Button btn3 = new Button("Button 3");

Button btn4 = new Button("Button 4");

When you create a widget in JavaFX, for example button,label,combobox or some other

widgets, you need to add that to your container, in here we need to add our four buttons

to the FlowPane container.

flowPane.getChildren().add(btn1);
flowPane.getChildren().add(btn2);
flowPane.getChildren().add(btn3);
flowPane.getChildren().add(btn4);

flowPane.getChildren().add(btn1);

flowPane.getChildren().add(btn2);

flowPane.getChildren().add(btn3);

flowPane.getChildren().add(btn4);

At the end you need to set your scene object to the stage of the window, and show the window.

stage.setScene(scene);
stage.show();

1 2	stage.setScene(scene); stage.show();

Run the complete code and this will be the result.

Subscribe and Get Free Video Courses & Articles in your Email