Flutter vs Java Graphical User Interface Frameworks - text

My name is Toma Velev
I’m a Senior Flutter Developer @ Prime Holding JSC https://www.primeholding.com/
Software Developer & Blogger at https://ProgramTom.Com/Dev/

In today’s presentation I’ll make a comparison of Flutter vs Java (GUI Frameworks).
History
Java is a 27 years old programming language. Flutter Framework is 2015/2017. So, in the
end - this post may be a comparison of a chicken and a horse .
Nonetheless - here are comparisons of different aspects - when coding UI with these two
technologies.
They have some many differences, but also a lot of similarities. Well, close enough.

Flutter is a Front End Framework and is a technology for creating apps - Android, iOS,
Desktop apps (for Windows, Linux, MacOS), Web + embedded. It tries to use native
packaging to produce executable files. This has advantages and disadvantages.
+ The advantage is - implementing the Graphical User Interface for all platforms
- The disadvantage is - the platform specific problems & issues - native plugin
integrations - are inherited.

At the same time - Java has a lot of libraries & frameworks
● a lot of back-end only libraries
● frameworks for both ends of an App at the same time.
● for Graphical User Interfaces
With most of the Java GUI Frameworks - AWT/Swing, Java FX, SWT - you’ll get an App for
all the Desktops, but it is far from getting the same code - onto the Android, iOS & Web
Platform.
SWT - There are some efforts to bring Standard Widget Toolkit
https://en.wikipedia.org/wiki/Remote_Application_Platform to the Web, but, as far as I gave
seen, it is creating web page like the Eclipse UI - not responsive and modern that you will
use on a mobile device.
There is paid service - that ports JavaFX to Mobile: https://gluonhq.com/ Gluon has
published a status update for JavaFX, showing the way in which a single JavaFX codebase
can be used across a PC (standard JavaFX), a mobile device with Android or iOS (through
integrated GraalVM), and a beta of browser-based WebGL (through Gluon).
Unfortunately - Java Applets are discontinued, because they act as a non-browser process
that is out of control. At the rise of the mobile platforms - Apple decided to not support Adobe
Flash. This decision affected all Browser extension technologies - Active X Controls, Java,
Flash, Silverlight.
There are a lot of Java libraries for creating web pages. Some of them even hide the need to
write CSS & JavaScript - like GWT and Vaadin. Orchestrating business applications into
Progressive Web Apps may be one of the ways to achieve unification of write once - run
anywhere. But, the features you will be able to program are limited by the progress of the
Web Standards. Archiving unification of one API for all platforms in Java is an illusion in my
personal opinion.
Why dig into GUIs?

The importance of the GUI part is displayed with the above meme.
You may have super complex technology. It may be the solution to millions of problems. But,
if you need some GUI at some point.
UI Components
Flutter has build-in
● Material Widgets - provided by the Flutter team. They come from Google, so expect
to be up to date with their latest theme and component recommendations. If you’ve
developed using some code from them you’ll know what I mean.

● Lagging with getting latest and greatest, but still - the flutter team also has built
Cupertino Widgets so you could theme your app as native iOS app.
● Possibility of OOP based Widget Components & UI Tree capable of endless
customizations.
Java has frameworks with variety of OS skins for the Desktop environments
Endless Java Web Frameworks variations. (many of them Full-Stack)
Java has a lot of Native look and feel UI OS implementations. They are for the Desktop
platforms - Windows, macOS, the different distributions of Linux.

Possibility of OOP based Widget Components & UI Tree capable of endless customizations.
Material Java
● Google Web Toolkit: https://gwtmaterialdesign.github.io/gwt-material-demo/#about

● VAADIN Framework Theme:
https://vaadin.com/docs/v14/flow/styling/material/overview

Flutter vs Java Graphical User Interface Frameworks - text

● JSF implementations (
https://www.google.com/search?q=jsf+material+design&oq=jsf+material ) try to solve
this missing link - at least for the web.
● Java was the first language to program Android Apps so You could develop Material
looking Apps with it. Google introduced version 3 of the material design system - not
only for Android. https://m3.material.io/get-started
Color Theming
Java on the Desktop
https://docs.oracle.com/javase/tutorial/uiswing/lookandfeel/color.html
UIManager.put("nimbusBase", new Color(...));
UIManager.put("nimbusBlueGrey", new Color(...));
UIManager.put("control", new Color(...));
JavaFX has their own Theming System:
AeroFX: A JavaFX theme from GUIGARAGE which copies the windows 7
applications look, check it here.

● AquaFX: A JavaFX theme from GUIGARAGE which copies the Mac
OS applications look, check it here.
● Flatter: A flat-design GUI theme from GUIGARAGE, check it here.
● JMetro: A JavaFX theme inspired by Microsoft’s fluent design system,
check it here.
● jbootfx: A JavaFX theme which uses bootstrap for responsive design,
check it here.
● MaterialFX: A JavaFX theme for Google Material Design appearance,
check it here.
● Flat Red: A simple flat and red JavaFX theme, check it here.
Java Web Frameworks take advantage of CSS Frameworks to archive theming
Flutter has a property of MaterialApp that could archive Theming. An Example may be found
here:
MaterialApp(
theme: ThemeData()
)

https://youtu.be/4zkcp_8lCCk
https://appainter.dev/#/
https://flutterawesome.com/a-material-theme-editor-and-generator-for-flutter/
IDEs that help with GUI programming
Flutter:
● Android Studio | Intellij | Visual Studio Code UI controls or shortcuts
● Debugger Host - that loads the Widget tree
Android Studio with the Flutter Plugin has a widget inspector that - during development - you
could select an item from the widget tree - just like the devtool on a web page. If you are

using Visual Studio Code or you want to separate the debugging from the IDE - there is
Debug Web page where you could see the visual hierarchy of the elements.
Java, as older language has more IDEs that could help GUIdevelopment:
● Intellij Community Edition & Paid
● Eclipse & MyEclipse (Paid)
● Visual Studio Code with Plugins
● NetBeans (Free)
● JDeveloper
● Other …

Many free & paid Java IDEs have visual builders which is great. They are pretty much like -
Visual Studio, Borland GUI Builder - with preview, palettes, widget tree, element properties
setter and so on.
Code Generation | No-Code Frameworks
There is a tendency in software development to use boilerplate code generation or even
no-code frameworks to get GUIs & Demos faster. Here are some of the choices in Flutter &
Java.
Flutter:
● https://flutterflow.io/ (Paid with free package option)

● https://www.supernova.io (Paid with free package option)
●
● https://www.andromo.com (Paid)

● https://flutterstudio.app (Free GUI builder)
● https://github.com/deven98/MetaFlutter - with this open source app - you
could actually visualize the widget tree from a Flutter App

Java:
● https://www.eclipse.org/windowbuilder/ Some years ago Google bought Window
Builder and donated it to the Eclipse foundation. You could design a Desktop App
with it - entirely visually
Vaadin Designer

Compile Time Tools
Flutter:
● https://pub.dev/packages/build_runner
● https://pub.dev/packages/rx_bloc_generator
Java:
● Groovy on Grails
● https://docs.spring.io/spring-roo/docs/current/reference/html/

● Netbeans - generating JSF CRUD from DB Schema
https://netbeans.apache.org/kb/docs/web/jsf20-crud.html
● https://www.jhipster.tech/ JHipster is a powerful stack that can generate Spring
Back-End Apps with React, Angular and even Flutter Front-End
Compile Time Tools - Both Java & Flutter
● https://github.com/merlinofcha0s/generator-jhipster-flutter
● https://tomavelev.com/GeneratorApp (Discontinued for now)

Pixel Perfect Apps
Flutter allows implementing Pixel Perfect Applications and keeping them as such. Once you
program the desired User Interface, you could make screenshots (automatically with CLI)
and the automatic tests can reverify that you’ve not broken anything from changes in the
business or user interface logic.
There is turorial directly from the flutter github
https://github.com/flutter/flutter/wiki/Writing-a-golden-file-test-for-package:flutter

Package for runtime check of pixels by adding a semi transparent image over the actual
screen: https://pub.dev/packages/pixel_perfect
Test Generation
As part of my work for Prime Holding, I am also improving the company owned Intellij Plugin
to produce tests from your dart features & lib. It will generate the common scenarios for your
BloCs and you’ll just need to set the correct parameters that will produce the desired state
(empty, loading, success, error).
https://github.com/Prime-Holding/rx_bloc/tree/fix/rxbloc_plugin_bootstrap_auto_wrap
For Java there are Paid Products & Services for doing Pixel Perfect UIs, but not many free
or out of the box that I know of.
Here is an Android package: https://github.com/handsomecode/pixel-perfect-for-android
How it is DONE?
The essential point of any comparison is not the war of features of the language or platform,
but "how-to" everyday challenges and examples.
Hello World
Not exactly useful, but, for juniors and getting started.

import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter'),
),
body: const Center(
child: Text('Hello World'),
),
),
);
}
}
import javax.swing.*;
public class HelloWorld {
public static void main(String[] arguments) {
JLabel label = new JLabel("Hello World", SwingConstants.CENTER);

JFrame.setDefaultLookAndFeelDecorated(true);
JFrame f = new JFrame("Hello World");
f.setSize(300, 150);
f.setDefaultCloseOperation(
JFrame.EXIT_ON_CLOSE);
f.add(label);
f.setVisible(true);
}
}
Common Layouts / Widgets / Components
● MaterialApp - is the top Widget that wraps the rest of the UI. It is something like
the JFrame (Swing) or a widget with @Route annotation in Vaadin
● Common Layouts
○ Flutter has Row
○ Flutter has Column
○ GWT/Vaadin have Horizontal Layout
○ GWT/Vaadin have Vertical Layout
○ Swing has FlowLayout that could be set to Panels
○ Android has LinearLayout
● Order in a flow
○ Flutter has Expanded
○ Java has Weight on Grid Bag Layed out Component
● Flexed elements
○ Flutter has Flex Widget
○ Java Swing has GridBag Component weight
○ Web has % or responsive Flex Components

● BottomSheet - Material Widget for Flutter or Native Android.
Scaffold.of(context).showBottomSheet<T>(
builder,
backgroundColor: backgroundColor,
elevation: elevation,
shape: shape,
clipBehavior: clipBehavior,
constraints: constraints,
enableDrag: enableDrag,
transitionAnimationController: transitionAnimationController,
);
Not present as a UI component on Desktop or, there are no Java Libraries I know. The
Java Libraries that embrace the Material Design on the Web have it as a component

● (Modal) Dialog
Flutter:
AlertDialog(
title: Text('Reset settings?'),
content: Text('This will reset your device to its default factory settings.'),
actions: [
FlatButton(
textColor: Color(0xFF6200EE),
onPressed: () {},
child: Text('CANCEL'),
),
FlatButton(
textColor: Color(0xFF6200EE),
onPressed: () {},
child: Text('ACCEPT'),
),
],
)

Java:
JOptionPane | JDialog
JOptionPane.showMessageDialog(frame,
"Eggs are not supposed to be green.");
final JDialog dialog = new JDialog(frame, "Click a button", true);
dialog.setContentPane(optionPane);
dialog.setDefaultCloseOperation(
JDialog.DO_NOTHING_ON_CLOSE);

dialog.addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent we) {
setLabel("Thwarted user attempt to close window.");
}
});
● SnackBar
The Snackbar is a Material component so - Java Libraries, Android & Flutter have it:
ScaffoldMessenger.of(context).showSnackBar(snackBar);
https://material.io/components/snackbars:

Similar to the SnackBar - toast-like components can be found in Java - as a System Tray
Message.
//If the icon is a file
Image image = Toolkit.getDefaultToolkit().createImage("icon.png");
//Alternative (if the icon is on the classpath):
//Image image =
Toolkit.getDefaultToolkit().createImage(getClass().getResource("icon.png"));
TrayIcon trayIcon = new TrayIcon(image, "Java AWT Tray Demo");
//Let the system resize the image if needed
trayIcon.setImageAutoSize(true);
//Set tooltip text for the tray icon
trayIcon.setToolTip("System tray icon demo");
tray.add(trayIcon);
trayIcon.displayMessage("Hello, World", "Java Notification Demo",
MessageType.INFO);

Or in case of Vaadin Framework
Notification.show("Login Failed");
● System Notification
https://pub.dev/packages/flutter_local_notifications
On the Mobile Systems - the system notification is called Local Notification

const NotificationDetails notificationDetails = NotificationDetails(
android: androidNotificationDetails,
iOS: iosNotificationDetails,
macOS: macOSNotificationDetails,
linux: linuxNotificationDetails,
);
await flutterLocalNotificationsPlugin.show(
id++, 'plain title', 'plain body', notificationDetails,
payload: 'item z');
}
Future<void> _showNotificationWithTextAction() async {
const AndroidNotificationDetails androidNotificationDetails =
AndroidNotificationDetails(
'your channel id',
'your channel name',
channelDescription: 'your channel description',
importance: Importance.max,
priority: Priority.high,
ticker: 'ticker',
actions: <AndroidNotificationAction>[
AndroidNotificationAction(
'text_id_1',
'Enter Text',
icon: DrawableResourceAndroidBitmap('food'),
inputs: <AndroidNotificationActionInput>[
AndroidNotificationActionInput(

label: 'Enter a message',
),
],
),
],
);
There is some inherited complexity added by the evolution of the Mobile Operating
Systems & the Web.
- They require User Permission
- There are evolving APIs that let the user do more directly from the Notification.

● MenuBar / AppBar / Toolbar / NavigationRail / Navigation Drawer
In a standard Desktop App - there are Menu Bars on top of the Window:
https://o7planning.org/11125/javafx-menu
// Create MenuBar
MenuBar menuBar = new MenuBar();
// Create menus
Menu fileMenu = new Menu("File");

Menu editMenu = new Menu("Edit");
Menu helpMenu = new Menu("Help");
// Create MenuItems
MenuItem newItem = new MenuItem("New");
MenuItem openFileItem = new MenuItem("Open File");
MenuItem exitItem = new MenuItem("Exit");
On the Web and Mobile there are APIs to archive the same, but, generally - the UI
Components are a little bit different in terms of UX.
Depending on the UX you want to archive - in Flutter / Mobile and Modern Web - there are
several components that you may use for menus.
The App Bar plays the role of Menu Bar and the Actions - Menu and Menu Items.
Because of the less space - their visibility of text, icon or both text and icon is visualized
adaptively to the visual space available.
There is a Toolbar or SliverAppBar Components that make the App Bar dynamic in terms
of UX.
https://blog.logrocket.com/flutter-appbar-tutorial/

https://material.io/components/navigation-drawer acts like a hidden menu activated by
the sandwich button.
Navigation Rail is a newer component that is a side menu with always visible items.

● Text Fields
All platforms have the variety of input fields
JTextField - Java Swing
TextField:
Label user_id=new Label("User ID");
Label password = new Label("Password");
TextField tf1=new TextField();
TextField tf2=new TextField();
Button b = new Button("Submit");
GridPane root = new GridPane();
root.addRow(0, user_id, tf1);
root.addRow(1, password, tf2);
root.addRow(2, b);
Scene scene=new Scene(root,800,200);
primaryStage.setScene(scene);

primaryStage.setTitle("Text Field Example");
primaryStage.show();
TextField - Flutter
const Padding(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter a search term',
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
child: TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your username',
),
),
),

Vaadin:
TextField textField = new TextField();
textField.setPlaceholder("Search");
textField.setPrefixComponent(VaadinIcon.SEARCH.create());
● Radio
● CheckBox/Toggle
● Slider
Flutter:

Java:
static final int FPS_MIN = 0;
static final int FPS_MAX = 30;
static final int FPS_INIT = 15; //initial frames per second
. . .
JSlider framesPerSecond = new JSlider(JSlider.HORIZONTAL,
FPS_MIN, FPS_MAX, FPS_INIT);
framesPerSecond.addChangeListener(this);
//Turn on labels at major tick marks.
framesPerSecond.setMajorTickSpacing(10);
framesPerSecond.setMinorTickSpacing(1);
framesPerSecond.setPaintTicks(true);
framesPerSecond.setPaintLabels(true);
Grids / (J)Tables/ (J)Lists
There is a difference in the User Experience of the old User Interface components, so -
accordingly the widgets differ.
Flutter

- Laily Loading https://pub.dev/packages/lazy_loading_list
- Pull to Refresh https://pub.dev/packages/pull_to_refresh
Java
- On Android ListView | RecycleView - with Adapter - to reuse visual components
- Grid Views / Table - Vaadin Framework, Google Web Toolkit, JSF have /
,
● TabBar
Flutter:
{
return DefaultTabController(
initialIndex: 1,
length: 3,
child: Scaffold(
appBar: AppBar(
title: const Text('TabBar Widget'),
bottom: const TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
),
body: const TabBarView(
children: <Widget>[
Center(
child: Text("It's cloudy here"),
),
Center(
child: Text("It's rainy here"),
),
Center(
child: Text("It's sunny here"),
),
],

),
),
);
}
Java:
Swing:
JTabbedPane tabbedPane = new JTabbedPane();
ImageIcon icon = createImageIcon("images/middle.gif");
JComponent panel1 = makeTextPanel("Panel #1");
tabbedPane.addTab("Tab 1", icon, panel1,
"Does nothing");
tabbedPane.setMnemonicAt(0, KeyEvent.VK_1);
"Does twice as much nothing");
"Still does nothing");
JComponent panel4 = makeTextPanel(
"Panel #4 (has a preferred size of 410 x 50).");
panel4.setPreferredSize(new Dimension(410, 50));
"Does nothing at all");

GWT:
TabBar bar = new TabBar();
bar.addTab("foo");
bar.addTab("bar");
bar.addTab("baz");
// Hook up a tab listener to do something when the user selects a
tab.
bar.addSelectionHandler(new SelectionHandler<Integer>() {
public void onSelection(SelectionEvent<Integer> event) {
// Let the user know what they just did.
Window.alert("You clicked tab " + event.getSelectedItem());
}
});
// Add it to the root panel.
RootPanel.get().add(bar);
}
Vaadin:
Tab details = new Tab("Details");
Tab payment = new Tab("Payment");
Tab shipping = new Tab("Shipping");
Tabs tabs = new Tabs(details, payment, shipping);
● Image(View),
● Buttons - Material Design offers three types of buttons - Raised/Elevated, Outline
and Icon Buttons.
Flutter:
TextButton(
onPressed: () {},
child: Text("text button"),
),
ElevatedButton(
onPressed: () {},

),
OutlinedButton(
onPressed: () {},
),
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.ac_unit),
label: Text("Winter is comming")),
OutlinedButton.icon(
onPressed: () {},
ElevatedButton.icon(
onPressed: () {},

Java swing:
https://stackoverflow.com/questions/1839074/howto-make-jbutton-with-simple-flat-sty
le
Embedding Native Views
Both Java & Flutter(Dart) are OOP so you could easily create Reusable Components.
Embedding Integrations
Flutter:
dart:ffi - for desktop and mobile
dart:js | dart:html for web
https://docs.flutter.dev/development/add-to-app/android/add-flutter-view
https://docs.flutter.dev/development/platform-integration/android/platform-views
https://medium.com/@ingo.rockel/embedding-a-flutter-web-application-inside-an-iframe-with-
a-dynamic-height-66c7197a5c94
Java - JNI
I have a personal achievement of integration mix:
Java Portlet with Grails Framework Back End with Ext JS Front-End
Portlet - with Struts 2 Framework with GWT calling the Ext JS

Navigation, Routing, Arguments
Common technique for archiving navigation is with a stack of states, widgets, pages or some
other type of components. This is the way it is implemented in Flutter, Native Android & the
Web (History pushState API).
Flutter
In terms of ways it is approached there are:
● Imperative - Navigation 1.0 - you specifically and concretely make the amendments
that affect the navigation.
○ Routing is handled in the beginning of the app by defining what route goes to
what page. You could optionally fill up the navigation stack to the page it is
pointing the URL by using:
Navigator.push(...) / Navigator.pop()
● Declarative - Navigation 2.0
The declarative way separates the access to the - provided by Flutter - API and having an
app specific component that manages what elements are placed in the stack.The navigation
stack is filled with routes containing their views - based on flags and other parameters.
Java
● Web Frameworks - The Java Frameworks are navigating between Routes, Pages, or
Components by using
○ Full Page reload and imperative navigation.
○ Imperative navigation and Partial Page reload and push things in the Browser
History - so the back and forward buttons work properly.
■ Accordingly - some page reloads could not enter at all the History
Stack
● Desktop - I haven’t seen myself - any significant navigation in Desktop Apps different
from imperative. This is because of the Windowed nature of the User Experience.
Passing Arguments
If you are using imperative navigation - you are free to pass whatever size, format and
complexity of arguments between visual components.
But, In any platform - Java, Flutter and any other - that has Routing, the best practice for
passing arguments is to be URL Encoded and limited to what could be stored as a GET
parameter limit (2,048 character). The idea for this is to support the Browser URL
routing.
Also, Common thing that is not Java nor Flutter specific is handling properly the protection of
URL endpoints/routes. When you have a Web app - the user may edit the URL address and
try to access resources that he is not authorized to.

Converting code to Executable Apps
Flutter build CLI (platform - x,y,z) produces platform specific binary ready to be executed or
published.
Java on the other side in most cases produces Java JAR Files that (require JRE) or War/Ear
files that require servlet or J2EE component - application server.
Spring Boot produces executable Jar files - that have their server embedded. There are also
ways to package apps in docker and minimize dependency download while building
container images. But, this is the power of Java on the Server Side.
- Creating executable apps with the native modules required along side it are package
by additional tools and configurations - launch4j
- https://www.graalvm.org/
On the Front-End side - you could find several Java Frameworks that are PWA ready - like
- Vaadin Framework
- GWT

Flutter vs Java Graphical User Interface Frameworks - text

Recommended

More Related Content

Similar to Flutter vs Java Graphical User Interface Frameworks - text (20)

Recently uploaded (20)

Flutter vs Java Graphical User Interface Frameworks - text