Circular Progress contain Icon | Circular Loading contain Image

flutter researchthinker

In this example, If you want to display a circular loading indicator containing an icon, you can use the CircularProgressIndicator along with the Icon widget.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Circular Bar with Icon Example'),
        ),
        body: CircularBarWithIcon(),
      ),
    );
  }
}

class CircularLoadingWithIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 50.0,
        height: 50.0,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.blue, // Change the color as needed
        ),
        child: Center(
          child: Stack(
            alignment: Alignment.center,
            children: [
              CircularProgressIndicator(
                valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
              ),
//Replace below section with Image
//Image.asset(
     //       'assets/logo.png', // Replace with your logo asset path
      //      width: 100.0, // Adjust the size of the logo as needed
       //     height: 100.0,
        //    fit: BoxFit.contain,
        //  ),
              Icon(
                Icons.star, // Replace with the desired icon / image
                size: 20.0, // Adjust the size of the icon as needed
                color: Colors.white, // Adjust the color of the icon as needed
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *

web_horizontal
About Us ♢ Disclaimer ♢ Privacy Policy ♢ Terms & Conditions ♢ Contact Us

Copyright © 2023 ResearchThinker.com. All rights reserved.