Flutter UI Widgets: Buttons, Backgrounds and Text Fields

A flutter tag widget is a small, styled UI element built with Flutter’s Chip widget or a Container with BoxDecoration that displays a label, category badge or filter pill inside your app. Use Chip for built-in behaviour or a decorated Container for full visual control — both take under ten lines of Dart code.

Flutter gives you fine-grained control over every visual detail: background images, BoxDecoration borders, circular and rounded buttons, icon-prefixed text fields and multiline text, all without a third-party library. This guide covers each pattern with production-ready code logic and real examples from Indian edtech and e-commerce apps.

• Key Takeaway 1: Use a Container with BoxDecoration to set a background image in Flutter and apply borders, gradients or rounded corners in one place.
• Key Takeaway 2: A flutter circle button is easiest to build with ClipOval wrapping an ElevatedButton, or by setting a circular BorderRadius on the button style.
• Key Takeaway 3: Add an icon inside a TextField using the prefixIcon or suffixIcon property of InputDecoration.
• Key Takeaway 4: Multiline text in Flutter needs maxLines: null and TextAlign set explicitly, whether you’re working with a Text widget or a TextField.
• Key Takeaway 5: The flutter tag widget pattern, a styled Container or Chip, is the fastest way to render filterable labels, skill badges or category pills in any Indian edtech or e-commerce app.

Setting a Background Image in Flutter with BoxDecoration

The cleanest way to display a background image in Flutter is to wrap your screen content inside a Container and pass a BoxDecoration to its decoration property. You set image: DecorationImage(image: AssetImage('assets/bg.jpg'), fit: BoxFit.cover) and the image fills the container automatically. No extra package needed.

According to the Stack Overflow Developer Survey 2024, Flutter is used by roughly 9.4% of professional developers globally, making it the most popular cross-platform mobile framework for mobile-first projects. That adoption rate reflects how production-ready Flutter’s core widget system, including BoxDecoration, has become.

Adding a Border with BoxDecoration

A BoxDecoration border in Flutter takes a Border object. You can set all four sides at once with Border.all(color: Colors.blue, width: 2), or target individual sides using Border(top: BorderSide(...)). Combine it with borderRadius: BorderRadius.circular(12) to get a rounded card look.

Here’s the pattern you’ll use repeatedly:

• Wrap your widget in a Container.
• Pass decoration: BoxDecoration(...) with your border, color or image.
• Set child to whatever widget lives inside.
• Add padding on the container so content doesn’t hug the border.

This same pattern powers the flutter tag widget you see in skill-badge UIs on apps like LinkedIn, Naukri and Indian edtech platforms such as Unacademy and upGrad. A small Container with BoxDecoration, a BorderRadius of around 20, a background color and a centered Text child gives you a production-ready flutter tag widget in under ten lines.

Container Background Image vs. Stack Approach

Some developers prefer wrapping a Stack with an Image.asset at the bottom layer and content widgets on top. Both work, but the container background image flutter approach using BoxDecoration is simpler for static backgrounds. Use Stack when you need precise pixel-level layering or animated overlays.

Flutter Circle Button and Rounded Button Patterns

A flutter circle button has exactly two reliable approaches. The first: wrap an ElevatedButton with ClipOval and give it equal width and height constraints. The second: set shape: CircleBorder() inside ElevatedButton.styleFrom and control size via fixedSize. Both produce a true circular hit area, which matters for accessibility.

According to GitHub’s 2023 Octoverse report, Indian developers are among the fastest-growing contributor groups to open-source Flutter repositories, reflecting the framework’s strong adoption across Indian startup and edtech ecosystems. According to the JetBrains Developer Ecosystem Survey 2023, Flutter ranks as the top cross-platform mobile framework by active usage among developers in Asia, with India representing one of the largest regional user bases.

Rounded Button in Flutter

A rounded button flutter doesn’t need to be fully circular. Set BorderRadius.circular(8) for a mild rounding or BorderRadius.circular(30) for a pill shape. Use ElevatedButton.styleFrom(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12))) to apply it cleanly. This keeps your button accessible and visually consistent across Android and iOS.

If you’re building apps for Indian startups or edtech platforms, rounded buttons are the de-facto standard in Material Design 3, which Flutter adopted as its default theme from version 3.0 onwards. Flat, sharp-cornered buttons look dated in 2025 UI.

Circular Image in Flutter

A circular image flutter is built with ClipOval wrapping an Image.asset or Image.network. Alternatively, use CircleAvatar with a backgroundImage property. The CircleAvatar widget is optimised for profile pictures and handles loading states gracefully, which is why you see it in almost every social or learning app.

If you’re exploring mobile development as a career path, check out the top skills every college student must learn before graduation for a broader view of where Flutter fits alongside other in-demand technologies.

TextField with Icon, Color and Multiline Text in Flutter

A TextField with icon flutter uses the InputDecoration class. Pass an icon widget to prefixIcon for a leading icon or suffixIcon for a trailing one. You can pair this with fillColor and filled: true to set the TextField color in flutter, giving your input fields a branded look without custom painting.

The Flutter team’s official API reference (flutter.dev, 2024) documents that InputDecoration exposes more than 30 configurable properties covering labels, hints, error text, borders and icons. Most developers use only five or six of them, which means there’s a lot of free customisation sitting unused in the average codebase.

Multiline Text Field in Flutter

Flutter multiline text in a TextField requires two things: set maxLines to null (unlimited) or a specific integer like 5, and set keyboardType: TextInputType.multiline. Without the keyboard type, mobile keyboards won’t show a newline key, which frustrates users instantly.

For a static Text widget displaying multiline content, use TextAlign.justify or TextAlign.left via the textAlign property. Set softWrap: true (it’s the default) and overflow: TextOverflow.visible if you don’t want text clipped. The TextAlign flutter property accepts six values: left, right, center, justify, start and end.

Building a Flutter Tag Widget

The flutter tag widget pattern shows up constantly in filter UIs, skill badges and category selectors across Indian apps. The simplest version is Flutter’s built-in Chip widget, which already handles label text, an optional avatar and a delete icon. For custom styling, wrap a Text inside a Container with BoxDecoration, set horizontal padding to 12 and vertical to 6, pick a background color and a BorderRadius of 20.

Here is a minimal flutter tag widget implementation:

Container(
  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
  decoration: BoxDecoration(
    color: Colors.blue.shade100,
    borderRadius: BorderRadius.circular(20),
    border: Border.all(color: Colors.blue, width: 1),
  ),
  child: const Text('Flutter', style: TextStyle(fontSize: 13)),
)

Want to go further? Use FilterChip for selectable tags or ActionChip for tappable ones. Both extend the base Chip and integrate cleanly with Flutter’s theme system. For a production app, wrap these flutter tag widget instances in a Wrap widget so tags reflow across multiple lines automatically. This is the exact pattern used in skill-selector screens on Indian hiring platforms like Naukri and Instahyre.

Learning Flutter UI properly is a genuine career accelerator. If you’re weighing your options, this guide to best career options in 2026 for students and professionals breaks down where mobile development sits against other high-demand paths. And if you’re just starting out, explore entry-level jobs for teens and graduates to see how Flutter skills translate into real hiring opportunities.

For structured learning, platforms listed in our best free online learning platforms for students in 2025 guide include Flutter-specific tracks that take you from widgets to full app deployment. Pair that with a look at top online courses for high-salary jobs in 2025 to see which certifications employers in India are actively hiring for.

If you haven’t decided on a direction yet, reading through how to choose the right career path after graduation in 2026 first can save you months of second-guessing. Mobile development, AI integration and cybersecurity are the three pillars most Indian tech employers are hiring around right now, with Flutter developer salaries ranging from approximately 4 LPA for freshers to 18 LPA for senior engineers, according to Glassdoor India data from 2024.

Frequently Asked Questions

What is a flutter tag widget?

A flutter tag widget is a small, styled UI component that displays a label, category or status badge. You build it using Flutter’s built-in Chip widget for standard behaviour, or a Container with BoxDecoration for fully custom styling. Wrap multiple flutter tag widget instances in a Wrap widget so they reflow across lines automatically.

What is the difference between Chip and Container for a flutter tag widget?

Chip is Flutter’s purpose-built flutter tag widget with built-in support for avatars, delete icons and theme integration. A Container with BoxDecoration gives you complete visual control but requires manual handling of tap events and state. Use Chip for standard filter or badge tags; use Container when your design deviates significantly from Material defaults.

How do you make tags wrap to multiple lines in Flutter?

Wrap your collection of flutter tag widget instances inside a Wrap widget instead of a Row. Set spacing: 8 for horizontal gaps and runSpacing: 6 for vertical gaps between rows. Wrap automatically moves tags to the next line when horizontal space runs out, which is essential for skill-badge and filter-chip UIs.

How do you set a background image in Flutter?

Wrap your screen content in a Container and set its decoration property to a BoxDecoration with image: DecorationImage(image: AssetImage('assets/bg.jpg'), fit: BoxFit.cover). Make sure the asset is declared in your pubspec.yaml under the assets section. The BoxFit.cover value scales the image to fill the container without distortion.

How do you make a circular button in Flutter?

Use ElevatedButton.styleFrom(shape: CircleBorder(), fixedSize: Size(60, 60)) to create a true circle button. Alternatively, wrap any button widget with ClipOval and constrain its size using a SizedBox. Both approaches produce a circular hit target. The CircleBorder approach is preferred because it keeps the ripple effect correctly clipped.

How do you add a border using BoxDecoration?

Pass a Border object to the border property inside BoxDecoration. Use Border.all(color: Colors.black, width: 1.5) for a uniform border on all sides, or specify individual sides with Border(top: BorderSide(color: Colors.red, width: 2)). Combine with borderRadius for rounded corners. Note that borderRadius only works when shape is set to BoxShape.rectangle.

How do you add an icon inside a Flutter TextField?

Use the prefixIcon property of InputDecoration for a leading icon: InputDecoration(prefixIcon: Icon(Icons.search)). For a trailing icon, use suffixIcon. Both properties accept any widget, not just Icon. You can also style the icon color with prefixIconColor to match your brand palette without wrapping the icon in an extra widget.

How do you display multiline text in Flutter?

For a TextField, set maxLines: null and keyboardType: TextInputType.multiline. For a static Text widget, set softWrap: true and choose a textAlign value like TextAlign.justify. If text is being clipped unexpectedly, check that the parent container has unconstrained height or set overflow: TextOverflow.visible on the Text widget.

The practical next steps this week: build a single Flutter screen that uses a Container with a background image, a BoxDecoration border, one circular button, one icon-prefixed TextField and a flutter tag widget built from Chip. That one exercise covers every concept in this guide hands-on. Push it to GitHub so you have a portfolio piece.

If you want to go beyond Flutter and build a full-stack career, explore 3University’s certification courses in Cybersecurity, Ethical Hacking, AI, Blockchain and Web3. These are practical, industry-mapped programs built for students, working professionals and career switchers across India who want skills that employers are actively hiring for right now.

Last updated: September 2026. Reviewed by the 3University editorial team.