Top 10 Flutter Widgets to Enhance Your App's User Interface
28 April, 2023
7
7
0
Contributors
Introduction
Hey everyone, I am Hasnain Makada, and I am currently working as a Rotational Super Writer at Showwcase where I produce high-quality content on tech and make it understandable in a simple for my community. In this blog, I am going to show you the top 10 flutter widgets which will help you enhance your application's user interface.
So without wasting any furthermore time, Let's get started.
Flutter Widgets
1. ListTile Widget
The ListTile widget in Flutter is a commonly used widget for displaying a row of information with an optional leading or trailing icon or image. It is often used in lists and other layouts to display content in a compact and visually appealing way.
The ListTile widget is most commonly used with the ListView.builder widget inside which we have to provide an array of data and then we can print the data row-wise inside the ListTile widget.
Here's how to create a ListTile in Flutter,
List<String> fruits = [
'apple',
'banana',
'orange',
'kiwi',
'mango',
'pineapple',
'grape',
'watermelon',
'peach',
'pear'
];
ListView.builder(
itemCount: fruits.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(faker.lorem.sentence()),
);
},
),Output:
2. GridView Widget
The GridView widget in Flutter is a powerful and flexible widget for displaying a collection of items in a grid format. It is often used to display images, icons, or other widgets in a visually appealing and responsive layout.
The GridView widget organizes its child widgets into a grid with a specified number of columns, which can be scrollable in both directions. Each child widget is placed in a Card or a Container widget, which can be customized with various properties such as padding, margin, colour, and border.
Here's how to create a GridView in Flutter,
List<String> fruits = [
'apple',
'banana',
'orange',
'kiwi',
'mango',
'pineapple',
'grape',
'watermelon',
'peach',
'pear'
];
GridView.builder(
itemCount: fruits.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, crossAxisSpacing: 10, mainAxisSpacing: 10),
itemBuilder: (context, index) {
return Container(
color: Colors.red,
child: Center(
child: Text(
fruits[index],
),
),
);
},
),Output:
3. Hero Widget
The Hero widget in Flutter is a powerful and flexible widget that enables seamless transitions between two screens or routes in your app. It allows you to animate the transition of a widget from one location to another, such as from a thumbnail image to a full-screen image, or from a button to a detail page.
The Hero widget works by wrapping a widget with a unique tag identifier and defining a FlightShuttleBuilder callback function that specifies how the widget should transition between the two screens. When the user taps on the widget, the Hero widget automatically animates the widget to its new location and expands it to its full size.
Here's how to create a Hero widget in Flutter,
// First Screen
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Hero Widget screen 1"),
),
body: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondScreen(),
),
);
},
child: Hero(
tag: 'imageTag',
child: Image.network(
'https://images.unsplash.com/photo-1604085572504-a392ddf0d86a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8b3JhbmdlJTIwZmxvd2VyfGVufDB8fDB8fA%3D%3D&w=1000&q=80',
),
),
),
),
);
}
}
// Second Screen
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Hero Widget screen 2"),
),
body: Center(
child: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Hero(
tag: 'imageTag',
child: Image.network(
'https://img.freepik.com/free-photo/purple-osteospermum-daisy-flower_1373-16.jpg',
),
),
),
));
}
}Output:
4. Card Widget
In Flutter, a Card widget is a material design card. It is a rectangular-shaped container with rounded corners and a shadow, which is used to display related pieces of information, such as a photo with a description, a product card in an e-commerce app, or a contact card in a social networking app.
The Card widget is very customizable, allowing you to add child widgets, set padding and margins, and define the border and shadow of the card. You can also specify the colour and elevation of the card to achieve the desired visual effect.
Here's how to create a Card in Flutter,
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
elevation: 50,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Image.network(
'https://th.bing.com/th/id/R.cc218d0b9f75747dcba3124f6a27c057?rik=f6nta9TqcKBw8A&riu=http%3a%2f%2f2.bp.blogspot.com%2f-hdkXfWeRV4A%2fTdizZhkLhhI%2fAAAAAAAAHUA%2fGlC3S4HL8vE%2fs1600%2f139865_1.jpg&ehk=bbwjHMEioXz7X1Fo4e%2b7q5zksOCAv8h5Rw8gKs7sGw8%3d&risl=&pid=ImgRaw&r=0',
fit: BoxFit.cover,
width: 200,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Apple',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'An apple is a sweet, edible fruit produced by an apple tree. '
'Apple trees are cultivated worldwide and are the most widely '
'grown species in the genus Malus.',
style: TextStyle(
fontSize: 16,
),
),
),
],
),
),Output:
5. Container Widget
In Flutter, a Container widget is a rectangular box that can contain other widgets. It is a very versatile widget that allows you to apply visual styling to its child widgets, such as setting its size, background colour, padding, margin, and border.
A Container widget is very flexible and can be used for a wide range of purposes, such as displaying images, text, or other widgets, as well as providing a background colour, adding padding or margin, or adding a border.
Here's how to create a container in Flutter,
Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(
color: Colors.black,
width: 2,
),
),
child: const Center(
child: Text('Hello, world!'),
),
),Output:
6. SingleChildScrollView Widget
A SingleChildScrollView widget creates a scrollable view that contains a single child widget. It is useful when the content within the child widget is too large to fit within the screen's boundaries, as it enables the user to scroll through the content to view all of it.
By default, the SingleChildScrollView scrolls vertically, but you can change the scrolling direction to horizontal by setting the scrollDirection property to Axis.horizontal.
You can also set the reverse property to true to reverse the scrolling direction. For example, if scrollDirection is set to Axis.horizontal and reverse is set to true, the content within the SingleChildScrollView will scroll from right to left instead of left to right.
Here's how to create a SingleChildScrollView in Flutter,
SingleChildScrollView(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
SizedBox(height: 200),
Text(
'This is some text that is too long to fit on the screen. '
'It will be wrapped within a SingleChildScrollView so that '
'the user can scroll through it to read all of the content.',
),
SizedBox(height: 200),
Image.network(
'https://ik.imagekit.io/1cw2zpbjy/OSWH/Open_Source_blog_cover.png?updatedAt=1667726312561',
height: 300,
width: 300,
),
SizedBox(height: 200),
Text(
'This is some more text that is also too long to fit on the screen. '
'It will also be wrapped within the SingleChildScrollView.',
),
SizedBox(height: 200),
],
),
),Output:
7. Divider Widget
In Flutter, the Divider widget is used to create a horizontal or vertical line that separates content in a widget tree. It can be used to visually group and differentiate between different sections of a user interface.
Here's how to create Divider in Flutter,
Divider(
height: 20,
thickness: 2,
color: Colors.blue,
indent: 50,
endIndent: 50,
),You can modify the parameters as per your preference on how you want to keep it.
Output:
8. CircleAvater Widget
In Flutter, the CircleAvatar widget is used to display a circular image or a user's profile picture. It can be used in various places like user profiles, contact lists, comments, and more.
Here's how to create CircleAvater in Flutter,
CircleAvatar(
radius: 100,
backgroundImage: NetworkImage(
'<Image-CDN>',
),
),Output:
9. ToggleButton Widget
ToggleButtons is a widget in Flutter that allows users to select multiple options from a predefined set of choices using toggle buttons. It is useful for creating UI elements that require the user to select multiple options at once, such as filtering or sorting data.
Here's how to create ToggleButton in Flutter,
List<bool> _selections = List.generate(3, (index) => false);
ToggleButtons(
children: [
Icon(Icons.format_bold),
Icon(Icons.format_italic),
Icon(Icons.format_underline),
],
isSelected: _selections,
onPressed: (index) {
setState(
() {
_selections[index] = !_selections[index];
},
);
},
),Output:
10. RangeSlider Widget
The RangeSlider widget is used to create a slider with two thumbs that allow users to select a range of values. It can be used for various use cases, such as selecting a price range, a time range, or a range of values. RangeSlider provides a customizable appearance and can be used with different styles and themes. It was added in Flutter 1.21.
Here's how to create the RangeSlider widget in Flutter,
RangeValues _values = RangeValues(0.0, 100.0);
RangeSlider(
values: _values,
min: 0.0,
max: 200.0,
divisions: 10,
onChanged: (RangeValues values) {
setState(() {
_values = values;
});
},
)Output:
FAQ's
- What are Flutter widgets?
Flutter widgets are building blocks for creating UI components in Flutter. Widgets can be combined to create complex UI layouts and interactions.
- How can the Container widget be used to enhance an app's UI?
The Container widget can be used to create a rectangular box with a specified width, height, and colour. It can be used to add padding, borders, and other styling to UI components.
- How can the ListView widget be used to enhance an app's UI?
The ListView widget can be used to display a scrolling list of UI components. It can be used to display large amounts of data in a compact and organized way.
- How can the RangeSlider widget help in your Flutter apps?
The RangeSlider widget in Flutter is a UI component that allows the user to select a range of values from a given range. It is similar to the regular Slider widget, but it allows the user to select a range of values rather than just a single value.
- Which type of animation does the hero widget usecolour in Flutter?
The Hero widget in Flutter uses a type of animation called "hero animation" or "shared element transition". This animation creates a smooth transition between two screens by animating the movement and transformation of a widget from one screen to another.
Conclusion
So these were all the widgets which you can use to enhance your app's performance, if you have any doubts related to DevOps or Flutter, feel free to reach out on Twitter and Showwcase.
Till then, Happy Coding 😃
flutter
frontend
ui
widgets
appdevelopment