The flutter widget is built using a modern framework. It is like a reaction. In this, we start with the widget to create any application. Each component in the screen is a widget. The widget describes what his outlook should be given his present configuration and condition. Widget shows were similar to its idea and current setup and state. Flutter is a free and open-source tool to develop mobile, desktop, web applications with a single code base.

In this article, we will explore the Linear Gauge in flutter using the linear_gauge_package. With the help of the package, we can easily achieve a flutter linear gauge. So let’s get started.

syncfusion_flutter_gauges | Flutter Package
The Flutter Gauges library includes the data visualization widgets Linear Gauge and Radial Gauge (a.k.a. circular…pub. dev

Table Of Contents :

Linear Gauge Widget

Implementation

Code Implement

Code File

Conclusion

Linear Gauge Widget :

The Flutter Linear Gauge is a data visualization widget that is used to display data on a linear scale. We can show the data vertically or vertically. In this, we have a rich of features in the form of axes, range, pointers, and animations. With this gauge, it is very easy to simulate a thermometer, progress bar, water tracker, etc.

Implementation :

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies :

dependencies:   
syncfusion_flutter_gauges: ^19.1.56

Step 2: Importing

import 'package:syncfusion_flutter_gauges/gauges.dart';

Step 3: Run flutter package get

Code Implementation :

Create a new dart file called linear_gauge_home_page.dart inside the lib folder.

First of all, we have created a home page screen in which five buttons have been created and at the click of each button, a new page will open in which we have shown the linear gauge in different ways. Let us understand this in detail.

Axis track:

The flutter linear gauge axis is a scale where a group of values ​​is plotted. We have used the gauge axis in this screen in which we have used the inside of the axisTrackStyle property inside the SfLinearGauge. Has taken the color of the linear-gradient type and has given its thickness value of 10. Let us understand this through a reference.

SfLinearGauge(
  isAxisInversed:true,
    axisTrackStyle: LinearAxisTrackStyle(
        thickness: 10,
        gradient: LinearGradient(
            colors: [Colors.red, Colors.orange],
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            stops: [0.4, 0.9],
            tileMode: TileMode.clamp
        )
    ),
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Ticks and label:

The flutter linear gauge can easily customize the label and ticks of the axis elements. As we have done in this screen, we have first taken a column in this screen, which describes the label and tick gauge, first of all in the tick gauge. The position of the ticks is displayed, the color of the ticks, etc., and the position label color size of the label is displayed in the label gauge. Let us understand this through a reference.

SfLinearGauge(

    tickPosition: LinearElementPosition.outside,
    labelPosition: LinearLabelPosition.outside,
    majorTickStyle: LinearTickStyle(length: 10, thickness: 2.5, color: Colors.orange),
    minorTickStyle: LinearTickStyle(length: 5, thickness: 1.75, color: Colors.red)),

SfLinearGauge(
    tickPosition: LinearElementPosition.inside,
    labelPosition: LinearLabelPosition.inside,
    axisLabelStyle: TextStyle(
        color: Colors.red,
        fontSize: 15,
        fontStyle: FontStyle.italic,
        fontWeight: FontWeight.bold,
        fontFamily: 'Times'),
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Ranges:

The flutter linear gauge range is a visual element that tells us the value axis tracking. For a linear gauge, we can add multiple ranges with different styles. As we have used the range in this screen in which three different ranges have been taken, whose color and start and end values ​​have been given separately.

LinearGaugeRange(
    startValue: 0,
    endValue: 33,
    position: LinearElementPosition.outside,
    color: Color(0xffF45656)),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Widget marker pointer:

Widget Marker Pointer We can use it as a marker in any type of flutter widget. As in this screen, we have used the marker pointer linear widget pointer inside which we have created a custom marker and given the value of value.

markerPointers: [
  LinearWidgetPointer(
    value:_pointerValue,
    onValueChanged: (value) => {
      setState(() => {_pointerValue = value})
    },
    child: Container(
        height: 20,
        width: 20,
        decoration: BoxDecoration(color: Colors.blueAccent)
    ),
  ),
],

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_linear_gauage_demo/route/route_names.dart';
import 'package:flutter_linear_gauage_demo/widget/custom_button.dart';
class LinearGauageHomePage extends StatefulWidget {
  @override
  _LinearGauageHomePageState createState() => _LinearGauageHomePageState();
}

class _LinearGauageHomePageState extends State<LinearGauageHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Linear Gauge Widget Demo'),
        centerTitle: true,
      ),
      body: Container(
        margin: EdgeInsets.only(left: 15, right: 15),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CustomButton(
              mainButtonText: 'Axis track',
              callbackTertiary: () {
                Navigator.of(context).pushNamed(RouteName.AxisTrackGuage);
              },
              color: Colors.green[200],
            ),
            SizedBox(
              height: 10,
            ),
            CustomButton(
              mainButtonText: 'Ticks and Labels',
              callbackTertiary: () {
                Navigator.of(context).pushNamed(RouteName.TicksLabelGuage);
              },
              color: Colors.blue[200],
            ),
            SizedBox(
              height: 10,
            ),
            CustomButton(
              mainButtonText: 'Ranges',
              callbackTertiary: () {
                Navigator.of(context).pushNamed(RouteName.RangesGuage);
              },
              color: Colors.orange[200],
            ),
            SizedBox(
              height: 10,
            ),
            CustomButton(
              mainButtonText: 'Shape marker pointer',
              callbackTertiary: () {
                Navigator.of(context).pushNamed(RouteName.ShapeMarkerPointer);
              },
              color: Colors.teal[200],
            ),
            SizedBox(
              height: 10,
            ),
            CustomButton(
              mainButtonText: 'Widget marker pointer',
              callbackTertiary: () {
                Navigator.of(context).pushNamed(RouteName.WidgetMarkerPointer);
              },
              color: Colors.green[200],
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion:

In this article, I have explained a Linear Gauge Widget in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Linear Gauge Widget from our side.

I hope this blog will provide you with sufficient information in Trying up the Linear Gauge Widget in your flutter project. We will show you the Linear Gauge Widget is?, and work on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

All mobile applications delivering some common characteristic. One quite obvious behavior is to provide users to make decisions or choose options, while needed. To achieve this we’ve some pre-built functionality.

Hello Guys, In this tutorial, we’ll learn about how to implement CupertinoActionSheet in Flutter.

Table of Contents :

Introduction

Setup

Code Implementation

Code File

Conclusion

Introduction:

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Using Flutter we can build

If you want to explore more about Flutter, please visit Flutter’s official website to get more information.

CupertinoActionSheet

According to flutter doc, An action sheet is a specific style of alert that presents the user with a set of two or more choices related to the current context. To build an ios-style app to present the list option we’ll use CupertinoActionSheet.

Setup:

First of all, we have to import the Cupertino package into our dart file.

import 'package:flutter/cupertino.dart;

CupertinoActionSheet is an ios-themed widget that has action sheets design specifications. An action sheet can have a title, an additional message, and a list of actions. To display action buttons that look like standard iOS action sheet buttons, provide CupertinoActionSheetActions for the actions given to this action sheet.

To include an iOS-style cancel button separate from the other buttons, provide a CupertinoActionSheetAction for the cancelButton given to this action sheet. An action sheet is typically passed as the child widget to showCupertinoModalPopup, which displays the action sheet by sliding it up from the bottom of the screen.

Constructors:

CupertinoActionSheet({Key? key,
Widget? title,
Widget? message,
List<Widget>? actions,
ScrollController? messageScrollController,
ScrollController? actionScrollController,
Widget? cancelButton})

Properties:

1. actions-> List<Widgets>: The set of actions that are displayed for the user to select.
2. actionScrollController → ScrollController: A scroll controller that can be used to control the scrolling of the actions in the action sheet
3. cancelButton → Widget: The optional cancel button that is grouped separately from the other actions
4. message → Widget: An optional descriptive message that provides more details about the reason for the alert.
5. title → Widget: An optional title of the action sheet. When the message is non-null, the font of the title is bold.

Code implementation:

In this snippet on click of a button, we’ve added CupertinoActionSheet. We can use it anywhere in the class.

showCupertinoModalPop

showCupertinoModalPopup(
context: context,
builder: (BuildContext context) => CupertinoActionSheet());

Now added title, message, actions, and cancelButton. These are the properties.

To show particular option item in action we used CupertinoActionSheetAction() widget.

CupertinoActionSheetAction(
child: const Text('Option 1'),
onPressed: () {
//do some action
}
);

Code file

import 'package:flutter/cupertino.dart';
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: HomePage(),
);
}
}

class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("CupertinoActionSheet"),
),
body: Center(
child: ElevatedButton(
onPressed: () {
final action = CupertinoActionSheet(
title: Text(
"Flutter dev",
style: TextStyle(fontSize: 30),
),
message: Text(
"Select any action ",
style: TextStyle(fontSize: 15.0),
),
actions: <Widget>[
CupertinoActionSheetAction(
child: Text("Action 1"),
isDefaultAction: true,
onPressed: () {
print("Action 1 is been clicked");
},
),
CupertinoActionSheetAction(
child: Text("Action 2"),
isDestructiveAction: true,
onPressed: () {
print("Action 2 is been clicked");
},
)
],
cancelButton: CupertinoActionSheetAction(
child: Text("Cancel"),
onPressed: () {
Navigator.pop(context);
},
),
);

showCupertinoModalPopup(
context: context, builder: (context) => action);
},
child: Text("Click me "),
),
),
);
}
}

Output

Conclusion:

In this article, I have explained the CupertinoActionSheet widget demo, which you can modify and experiment with according to your own. This little introduction was about showing an ios-styled theme in the app.

I hope this blog will provide you with sufficient information in trying up CupertinoActionSheet Widgets in your Flutter projects. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Related: SMS Using Twilio In Flutter

Related: Using SharedPreferences in Flutter

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

Flutter has made it quite easy to develop complex UIs for developers. Pulsation automated testing empowers you to meet high responsiveness in your application as it helps in discovering bugs and various issues in your application. Pulsation is a tool for developing mobile, desktop, web applications with a code & is a free and open-source tool.

Hello friends, I will talk about my new blog on Inherited Widget In Flutter. We will also implement a demo of the Inherited Widget, and describes its properties, and how to use them in your flutter applications. So let’s get started.

Table Of Contents :

Inherited Widget

Attributes

Code Implement

Code File

Conclusion

Inherited Widget :

In flutter, the inherited widget is a base class that allows those classes to extend the information under the tree from it. Inherited widgets are also a kind of state management technique. It works by telling registered build references when a change occurs. However, it adds interoperability to any app in a secure way, but when doing so it can Re-create each widget atop the tree.

Demo Module :

Attributes

Let’s talk about some main constructors of Inherited Widget.

const InheritedWidget({
Key? key, required Widget child
})
: super(key: key, child: child);

child: We use the child property to use widgets like row, column stack, etc. so that we can exclude many children.

key: The key property is a one-of-a-kind parameter. Basically, every widget creator can be found if the two widget’s runtime type and key property are is equal respectively, then the new widget updates the old widget by calling it the underlying element. Otherwise, the old element is updated. The tree is removed from the tree, the new widget is converted to an element, and the new element is inserted into the tree.

Code Implementation:

You need to implement it in your code respectively:

Create a new dart file calledcount_state_demo inside the lib folder.

Before using the Inherited widget we have created a class named Constant that extends the Inherited widget It overrides the updateShouldNotify method used to get the closest widget to the information from the given BuildContext.

class CountState extends InheritedWidget {

final int count;
final Widget child;
final Function addCounter;
final Function removeCounter;

CountState({Key key, this.count,this.child, this.addCounter,this.removeCounter})
: super(key: key, child: child);

static CountState of(BuildContext context) {
return (context.dependOnInheritedWidgetOfExactType<CountState>());
}

@override
bool updateShouldNotify(CountState oldWidget) {
//return true;
return count != oldWidget.count;
}
}

This method has to be canceled before the inherited widget can be overridden updateShouldNotify method. This method has been used so that the widget received from this widget must be notified or not. It is of type Boolean and accepts a parameter that Is similar to a square

@override
bool updateShouldNotify(CountState oldWidget) {
//return true;
return count != oldWidget.count;
}

Now we will initialize the count state in the RootWidget class and initialize the addCounter and removeCounter functions, then we will define the InheritedWidgeDemo class which will display the value of the counter which has two buttons that will be clicked on and add value and remove value.

return CountState(
count: count,
addCounter: addCounter,
removeCounter: removeCounter,
child: InheritedWidgetDemo(),
);

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_inherited_widget_demo/view/count_state.dart';

class RootWidget extends StatefulWidget {
@override
_RootWidgetState createState() => _RootWidgetState();
}

class _RootWidgetState extends State<RootWidget> {
int count = 0;
void addCounter() {
setState(() {
count++;
});
}

void removeCounter() {
setState(() {
if(count>0){
count--;
}
});
}

@override
Widget build(BuildContext context) {
return CountState(
count: count,
addCounter: addCounter,
removeCounter: removeCounter,
child: InheritedWidgetDemo(),
);
}
}

class InheritedWidgetDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
final counterState = CountState.of(context);
return Scaffold(
appBar: AppBar(
backgroundColor:Colors.blue,
title: Text(
'Counter Inherited Widget Demo',
style: TextStyle(color: Colors.white),
),
),

body: Column(
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children: <Widget>[
Align(
alignment: Alignment.bottomCenter,
child:Text('Items add & remove: ${counterState.count}',
style: TextStyle(fontSize: 20),
),
),

Row(
mainAxisAlignment:MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Align(
alignment: Alignment.bottomLeft,
child: new FloatingActionButton(
onPressed: counterState.removeCounter,
child: new Icon(
Icons.remove,
color: Colors.white,
),
),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Align(
alignment: Alignment.bottomCenter,
child: new FloatingActionButton(
onPressed: counterState.addCounter,
child: new Icon(
Icons.add,
color: Colors.white,
),
),
),
),
],
),
],
),
);
}
}

Conclusion:

In this article, I have explained an Inherited Widget in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Inherited Widget demo from our side.

I hope this blog will provide you with sufficient information in Trying up the Inherited Widget in your flutter project. We showed you what the Inherited Widget is and work on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Related: Streamlining Payments In Flutter

Related: Exploring StreamBuilder In Flutter

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.