In this post, you will learn how to make clickable text in Flutter. Many apps use clickable text in the signup/login form. After completing this tutorial, you can also make one like that.

• If you want to make a hyperlink, go to this example: Flutter HyperLink Text Example

Let’s go then.

• How To Install Flutter & Create Flutter Project?
• 7 Flutter Commands You Must Know

How To Make Text Clickable Using RichText Widget?

In this example, You will use the RichText widget. RichText…, just like the name it’s rich in features when compared to a Text widget.

Let’s check it out.

I have already discussed about clickable text in Flutter Notes App

• TextSpan used to show text inside RichText.
• Using recognizer property, we can make the text clickable.
• Cascade notation(..) allows to perform sequence of operations on same object, here TapGestureRecognizer.
• When the Login text clicked, onTap method gets called.
• Don’t forget to add this statement : import ‘package:flutter/gestures.dart’;

RichText(
            text: TextSpan(children: [
              TextSpan(
                text: 'Already have account? ',
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
              TextSpan(
                  text: 'Login',
                  style: TextStyle(
                    color: Colors.blue,
                  ),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      print('Login Text Clicked');
                    }),
            ]),
          ),

The complete source code is given below.

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Clickable Text Using RichText',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Clickable Text Using RichText'),
        ),
        body: Center(
          child: RichText(
            text: TextSpan(children: [
              TextSpan(
                text: 'Already have account? ',
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
              TextSpan(
                  text: 'Login',
                  style: TextStyle(
                    color: Colors.blue,
                  ),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      print('Login Text Clicked');
                    }),
            ]),
          ),
        ),
      ),
    );
  }
}
 

Flutter Clickable Text Using InkWell Example

InkWell widget helps to listen for tap events. Wrapping with Text widget we can easily find out the tap events.

• When text gets clicked, onTap gets called.

InkWell(
            onTap: () {
              print('Text Clicked');
            },
            child: Text('Clickable Text Using InkWell'),
          ),

complete source code is given below.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Clickable Text Using InkWell',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Clickable Text Example'),
        ),
        body: Center(
          child: InkWell(
            onTap: () {
              print('Text Clicked');
            },
            child: Text('Clickable Text Using InkWell'),
          ),
        ),
      ),
    );
  }
}

• How To Remove Debug Banner In Flutter?
• How To Center AppBar Title In Flutter?

Flutter Clickable Text Using GestureDetector

Just like InkWell, GestureDetector can also used to listen for tap events. So just wrap Text widget with GestureDetector.

• When the text tapped, GestureDetector’s onTap method gets called.

GestureDetector(
            onTap: () {
              print('Text Clicked');
            },
            child: Text('Clickable Text Using GestureDetector'),
          ),

Complete source code given below.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Clickable Text Using GestureDetector',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Clickable Text Example'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              print('Text Clicked');
            },
            child: Text('Clickable Text Using GestureDetector'),
          ),
        ),
      ),
    );
  }
}

That’s all for now.

If you like this post, please share it with your family and friends. If you got any other ways, feel free to comment.
Thank you.

RichText Widget Docs

UI/UX has an importance in your app’s success. A likable user interface can win customers’ trust and love. Therefore sometimes you need to change the default look of the app. So in this post, as a first step, you will learn how to set background color in Flutter.

In Flutter, you can achieve a simple thing in different ways. setting background color too.

Let’s check it out, then.

• How To Set Background Image In Flutter?
• Create Flutter Project In Android Studio
• 7 Flutter Commands You Must Know

1. How To Set Background Color Using scaffoldBackgroundcolor property

Scaffold widget provides backgroundColor property to change the background color. By default, it uses Theme.scaffoldBackgroundColor.

• You can use Colors class values or hex code values.
• Use hex code like this: 0xff+Hex Code

Scaffold(
         backgroundColor: Color(0xfff57d7c),
         //backgroundColor: Colors.red,

...)

Complete source code is given below.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xfff57d7c),
        // backgroundColor: Colors.red,
        body: Center(
          child: Text(
            'Set Background Color Example',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

• Remove Debug Banner In Flutter

2. Set Background Color Using MaterialApp property

In this example, we will use scaffoldBackgroundColor to change background color. It affects all scaffolds in your app.

MaterialApp(
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.orange,
      ),
      home: MyApp(),
    )

The complete source code is given below.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.orange,
      ),
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Set Background Color Example 2'),
      ),
      body: Center(
        child: Text(
            'Set Background Color Using \n\nscaffoldBackgroundColor Property'),
      ),
    );
  }
}

• Flutter Text Line Break Example

3. Change Background Color Using Theme class

In this example, You will use Theme class. Using Theme class, You can change background color using scaffoldBackgroundColor property.

• copyWith() method takes properties which need to change and return new object.

Theme(
        data: Theme.of(context).copyWith(
          scaffoldBackgroundColor: Colors.indigo,
        )
....

Complete Source code is given below.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Theme(
        data: Theme.of(context).copyWith(
          scaffoldBackgroundColor: Colors.indigo,
        ),
        child: Scaffold(
          body: Center(
            child: Text(
              'Set Background Color Using Theme Class',
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

4.1 Set Background Color Using Container

In this example, we will use Container widget to set background color. Container uses complete height and width of the screen.

Scaffold(
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.yellow,
          child: Center(child: Text('Set Background Color Using Container')),
        ),
      ),

Complete Source code is given below.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.yellow,
          child: Center(child: Text('Set Background Color Using Container2')),
        ),
      ),
    );
  }
}

4.2 Set Background Color Using Container and SizedBox

• SizedBox.expand() become large as parent allows.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SizedBox.expand(
          child: Container(
            color: Colors.yellow,
            child: Center(
              child: Text('Set Background Color Using Container & SizedBox'),
            ),
          ),
        ),
      ),
    );
  }
}

That’s all for now. If you like this post, please share it with your family and friends.
Thank you.

• Scaffold’s backgroundColor property

Showing large chunks of text without break in app is visually unappealing. Users might feel painful to read.
Most of the users scan the content at an initial glance, if they don’t find what they want, most of the time, they will click back.

So It’s our developers’ task to make the app’s content easy to read and make it visually attractive.

This post describes two simple but effective ways to break the content.

• How To Install Flutter And Create Project?
• 7 Flutter Commands You Must Know

How To Break Text Line In Flutter? – Using New Line character

For those who don’t know new line. \n is the new line character. Using this character, we can easily make a new line.

Let’s create a simple example like above.

Text('Like\nAndroidRide\n\nShare Posts')

• When first \n added, “AndroidRide” text moved to next line.
• When \n added twice, content placed to second line.

Here is the full source code.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Text Line Break Example 1'),
        ),
        body: Center(
          child: Text('Like\nAndroidRide\n\nShare Posts'),
        ),
      ),
    );
  }
}

• How To Remove Debug Banner In Flutter?
• How To Center AppBar Title In Flutter?
• Check this Notes app, \n used here too.

How to break Text line using triple quotes?

In this example, you will learn how to break text line using triple quotes.

It’s another easy method, you don’t need to do anything extra. Just place your content inside the triple quotes like below.

• ”’Content”’
• Padding used to get some white space around the Text widget.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final dataString =
      '''Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  

Pretium quam vulputate dignissim suspendisse in est. Ipsum dolor sit amet consectetur adipiscing elit. Urna porttitor rhoncus dolor purus non enim praesent elementum. Arcu ac tortor dignissim convallis. Sed libero enim sed faucibus. Amet venenatis urna cursus eget. 

Aliquet porttitor lacus luctus accumsan tortor. Suscipit adipiscing bibendum est ultricies. Dolor magna eget est lorem ipsum. Ac tortor dignissim convallis aenean et tortor. 
 ''';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Text Line Break Example 2'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Text(dataString),
          ),
        ),
      ),
    );
  }
}

• Flutter Circle Avatar Widget Tutorial
• Flutter ImagePicket Tutorial
• Flutter Path Provider Tutorial
• How To Reduce Android App Development Time Using Genymotion Emulator?

That’s all for now. If you got any other methods, feel free to share with us.

If you like this post, please share it with your family and friends.

Thank You.

• Flutter Text Widget

In this post, you will learn how to make a vertical divider in Flutter.

let’s create a simple one.

• Setup Flutter & Create Project
• Flutter Command to Create Project

Simple Vertical Divider Example

If you check the code, you can find out that VerticalDivider is just a SizedBox. You can use Vertical Divider with horizontal ListView.

• Align widget is used to align the Container to top of the App.
• In this example, divider height depends on the Container height.
• Here color of the divider is black.
• Given 20 empty space above the divider.
• Divider width is also 20.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Vertical Divider Example';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.topCenter,
      child: Container(
        height: 80,
        padding: const EdgeInsets.all(10),
        child: VerticalDivider(
          color: Colors.black,
          thickness: 3,
          indent: 20,
          endIndent: 0,
          width: 20,
        ),
      ),
    );
  }
}

• Remove Debug Banner in Flutter
• How To Center AppBar Title in Flutter?
• Amazing Flutter Notes Taking App Using ImagePicker, Provider, Sqflite.

Properties

Color color : Color of the vertical divider line.

double endIndent: total empty space under the divider.

double indent: sum of empty space on top of the divider.

double thickness: Thickness of the divider

double width: Width of the divider.

Vertical Divider Example 2

Let’s make a red color divider inside Row widget. Yes, just like above image.

• Row widget aligns Text widgets.
• Here VerticalDivider’s height depends on the SizedBox’s height.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Vertical Divider Example 2';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('May 1, 2021'),
          SizedBox(
            height: 25,
            child: VerticalDivider(
              color: Colors.red,
              thickness: 2,
              indent: 5,
              endIndent: 0,
              width: 20,
            ),
          ),
          Text('Saturday'),
        ],
      ),
    );
  }
}

Vertical Divider Using Container

In this example, you will not use VerticalDivider() widget, but you will use Container. It’s really simple to make.

• Here Align widget used to Align the Padding and VerticalDivider.
• Depends on Container properties values, you can make your Divider.
• You can also use other widgets, Just like Container

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Vertical Divider Using Container';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Align(
          alignment: Alignment.topCenter,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: VerticalDividerWidget(),
          ),
        ),
      ),
    );
  }
}

class VerticalDividerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      width: 3,
      color: Colors.brown,
    );
  }
}

That’s all for now. If you like this post, please share it with your family and Friends. If there is any doubts, please comment.

Thank you for scrolling.

• Vertical Divider Documentation
• Flutter Background Image Example
• FloatingActionButton In Flutter
• Genymotion Android Emulator – How To Reduce Android Development Time Using Genymotion

In this post, you will learn how to make placeholder in TextFormField and TextField.

Okay.

Let’s set placeholder then.

If you don’t know how to setup Flutter and Create project, you can go to this link. There are some Flutter commands you must know. Go for it too.

Simple TextFormField PlaceHolder Example

• Below code, we use decoration property inside TextFormField and TextField. You must provide value With InputDecoration
• Inside InputDecoration, Use hintText to show hint.

         TextFormField(
            decoration: InputDecoration(hintText: 'TextFormField - Hint text'),
          ),
 

         TextField(
            decoration: InputDecoration(hintText: 'TextField - Hint Text'),
          ),
 

2. HintText vs LabelText

Most of the people didn’t know the difference between hintText and labelText in Flutter. Above GIF will easily help you to find out the difference.

labelText : it animates the label by default. When the input field(Here TextField) is empty, labelText shows on the top of input field. When it get focus, label moves above the top of input field.

hintText : as the name suggests it just shows a hint to the user and no animation.

TextField(
                decoration: InputDecoration(labelText: 'labelText'),
              ),
              TextField(
                decoration: InputDecoration(hintText: 'hintText'),
              ),
              TextField(
                decoration:
                    InputDecoration(hintText: 'both', labelText: 'both'),
              ),

3. Multiline TextFormField with PlaceHolder example

Sometimes, our app needs a multiline input for taking feedback and other detailed information. In this example, You will make a multiline TextFormField.

• In this example, you will use TextFormField wrap With Expanded widget inside Column. That helps to expand the TextFormField inside the Column.
• If expands:true, then you must set maxLines and minLines to null. Otherwise an error thrown.
• expands:true makes TextField or TextFormField will expands to fill the parent(here Expanded).

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Column(
          children: [
            Expanded(
              child: TextFormField(
                expands: true,
                maxLines: null,
                minLines: null,
                decoration: InputDecoration(labelText: 'comment'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Rounded Border TextFormField with PlaceHolder example

Most of the apps are using rounded border TextFormField nowadays. In flutter it’s easy to make one like above.

• Here you will use Container around TextFormField
• Container used to make rounded corners and green background.
• Flutter Padding Widget
• Used BoxDecoration inside container to make circular rounded borders.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('TextFormField PlaceHolder example'),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Container(
            padding: EdgeInsets.symmetric(
              horizontal: 20,
              vertical: 20,
            ),
            decoration: BoxDecoration(
                color: Colors.green.shade300,
                borderRadius: BorderRadius.circular(36)),
            child: TextFormField(
              cursorColor: Colors.white,
              style: TextStyle(
                color: Colors.white,
              ),
              decoration: InputDecoration.collapsed(
                hintStyle: TextStyle(
                  color: Colors.white,
                ),
                hintText: 'Enter something',
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Form Validation Example

I have previously talked about this, you can use this link for detailed information.

That’s all for now. If you like this post, please share it with your family and friends. If there is any doubt, please comment.

• More Info About TextFormField
• expands property

Do you want to make a circular Image icon like in social media apps?

Use CircleAvatar, You can also use Container and other widgets.

But In this post, I am talking about CircleAvatar.

Let’s check it out what will you learn in this post.

• How To Draw Circle In Flutter Using Canvas?

Image in Circle Shape Example – Using CircleAvatar

In this example, you will use NetworkImage widget for showing Image. If you are a real beginner, Use this post to create a Flutter project or you can use Flutter command to create project and open it in Visual Studio Code.

• Align widget used to align the CircleAvatar to Center
• By default, CircleAvatar radius size is 20. It’s okay for ListView item. For this example, I increased the size of radius to 50. you can delete that line and check.
• NetworkImage shows the Image based on the given URL.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter CircleAvatar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('CircleAvatar - NetworkImage Example'),
        ),
        body: Align(
          alignment: Alignment.topCenter,//aligns CircleAvatar to Top Center.
          child: CircleAvatar(
            radius: 50,//radius is 50
            backgroundImage: NetworkImage(
                'https://cdn.pixabay.com/photo/2015/03/03/20/42/man-657869_1280.jpg'),//image url
          ),
        ),
      ),
    );
  }
}

CircleAvatar Properties

1.backgroundColor: Use this property to fill the circle with color. If backgroundColor is not given, CircleAvatar uses a theme based color.

2.backgroundImage: Using backgroundImage property, You can set Image. Above example, uses NetworkImage. But you can also use FileImage, AssetImage, etc.

3.child: child property used set the widget inside the circle Avatar. Using this property, you can set Image, Icon or Text or any other Widget.

4.foregroundColor: It determines color of the text or Icon inside CircleAvatar.

5.foregroundImage: Foreground image of the CircleAvatar.

6.maxRadius: It determines maximum radius of the CircleAvatar.

7.minRadius: Decides the minimum radius of the CircleAvatar.

8.onBackgroundImageError: Callback released when background image loading fails.

9.onForegroundImageError: Callback executes when foreground Image loading fails.

10.radius: The size of the avatar (half of the diameter). Default size is 20 logical pixels.

Flutter CircleAvatar AssetImage Example

• In this example, Let’s use AssetImage widget and load image from app resources.

• First create an assets directory, and put your image in it. Just like above.

  assets:
    - assets/

• Open the pubspec.yaml file, and add assets/ like above. Then only app can access Assets directory.
• In dart code, you will use AssetImage and specify the path of the image.
• Here Align used to align the Widget to topCenter. For an empty space around the CircleAvatar – Use Padding.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter CircleAvatar Image Asset Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Circle Avatar AssetImage Example'),
        ),
        body: Align(
          alignment: Alignment.topCenter,//aligns to topCenter
          child: Padding(//gives empty space around the CircleAvatar
            padding: const EdgeInsets.all(8.0),
            child: CircleAvatar(
              radius: 35,//radius is 35.
              backgroundImage: AssetImage('assets/environment.jpg'),//AssetImage loads image URL.
            ),
          ),
        ),
      ),
    );
  }
}

Flutter Circle Avatar Text Example

How to fit text inside CircleAvatar Widget?

CircleAvatar provides a property called child helps to set Text inside of it.

okay…Let’s do that.

• Row widget : helps to horizontally align both CircleAvatar widgets.
• SizedBox: gives empty space between CircleAvatar widgets.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter CircleAvatar Text Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter CircleAvatar Text Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(//aligns children to Center.
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              CircleAvatar(
                child: Text(
                  'S',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                backgroundColor: Colors.orange,
              ),
              SizedBox(
                width: 5.0,//empty space between CircleAvatar widgets.
              ),
              CircleAvatar(
                child: Text(
                  'Sun',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                backgroundColor: Colors.red,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Flutter Icon With Circle Background – Using CircleAvatar

Let’s use icon instead of image or Text in CircleAvatar.

• GestureDetector is used to listen for the tap events. If user tapped, it will print “icon tapped” in terminal.
• Here you will use child property to set the Icon.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter CircleAvatar Icon Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter CircleAvatar Icon Example'),
        ),
        body: Align(
          alignment: Alignment.topCenter, //aligns to topCenter.
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: GestureDetector(
              //listening tap events
              onTap: () {
                print('icon tapped');
              },
              child: CircleAvatar(
                child: Icon(
                  Icons.search,
                  color: Colors.white,
                ),
                backgroundColor: Color(0xFF47b881),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Flutter Circle Avatar Border Example

• Here you will use two CircleAvatar widgets. One for border and other for image.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter CircleAvatar Border Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter CircleAvatar Border Example'),
        ),
        body: Align(
          alignment: Alignment.topCenter,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: CircleAvatar(
              //border
              radius: 110,
              backgroundColor: Colors.brown,
              child: CircleAvatar(
                radius: 100,
                backgroundImage: NetworkImage(
                    'https://cdn.pixabay.com/photo/2017/09/27/15/52/man-2792456_1280.jpg'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Flutter FB Story Icon Example – Multiple Border Using CircleAvatar

Let’s make an Icon like in Facebook Stories.

• Here you will use 3 CircleAvatars.1: Blue Color, 2: White Color, and 3: for Image.
• Radius of each is different.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter FB Story Icon ex',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter FB Story Icon ex'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Align(
            alignment: Alignment.topCenter,
            child: CircleAvatar(
              radius: 135,
              backgroundColor: Colors.blue,
              child: CircleAvatar(
                radius: 125,
                backgroundColor: Colors.white,
                child: CircleAvatar(
                  radius: 115,
                  backgroundImage: NetworkImage(
                      'https://cdn.pixabay.com/photo/2018/01/15/07/52/woman-3083390_1280.jpg'),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

That’s all for now. If you like this post, Please share it with your family and friends.

For more info: Flutter CircleAvatar Docs