Blog - Flutterexperts

PhysicalModel Widget in Flutter

Widgets

-

May 22, 2024

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

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

class PhysicalModelDemo extends StatefulWidget {
  @override
  _PhysicalModelDemoState createState() => _PhysicalModelDemoState();
}

class _PhysicalModelDemoState extends State<PhysicalModelDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Physical Model Widget'),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Column(
              children: [
                Text(
                  'Physical Model Widget in circle Box Shape',
                  style: TextStyle(
                    fontStyle: FontStyle.italic,
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                SizedBox(
                  height: 25,
                ),
                PhysicalModel(
                  elevation: 6.0,
                  shape: BoxShape.circle,
                  shadowColor: Colors.red,
                  color: Colors.black,
                  borderRadius: BorderRadius.all
                    (Radius.circular(10)),
                  child: Container(
                    height: 120.0,
                    width: 120.0,
                  ),
                ),
              ],
            ),
            Column(
              children: [
                Text(
                  'Physical Model Widget in rectangle Box Shape',
                  style: TextStyle(
                    fontStyle: FontStyle.italic,
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                SizedBox(
                  height: 25,
                ),
                PhysicalModel(
                  elevation: 6.0,
                  shape: BoxShape.rectangle,
                  shadowColor: Colors.red,
                  color: Colors.white,
                  borderRadius: BorderRadius.all
                    (Radius.circular(10)),
                  child: Container(
                    height: 120.0,
                    width: 120.0,
                    color: Colors.blue[50],
                    child: FlutterLogo(
                      size: 60,
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion:

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

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

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

Clap 👏 If this article helps you.

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

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 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: Flow Widget In Flutter

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

Grouped ListView in Flutter

Widgets

Shaiq Khan

-

May 22, 2024

0

F lutter is a portable UI toolkit. In other words, it’s a comprehensive app Software Development toolkit (SDK) that comes complete with widgets and tools. Flutter is a free and open-source tool to develop mobile, desktop, web applications. Flutter is a cross-platform development tool. This means that with the same code, we can create both ios and android apps. This is the best way to save time and resources in our entire process. In this, hot reload is gaining traction among mobile developers. Allows us to quickly see the changes implemented in the code with hot reload

In this article, we will Explore Grouped ListView In Flutter Using the grouped_list_packaged With the help of the package, we can easily achieve flutter grouped list and describes his some properties and how to use them in your flutter applications. So let’s get started.

group_list_ library

grouped_list | Flutter Package
A flutter ListView in which list items can be grouped to sections. Features Easy creation of chat dialog. List Items…pub.dev

GroupedListView<dynamic, String>(
  elements: _elements,
  groupBy: (element) => element['group'],
  groupComparator: (value1,
      value2) => value2.compareTo(value1),
  itemComparator: (item1, item2) =>
      item1['topicName'].compareTo(item2['topicName']),
  order: GroupedListOrder.DESC,
  // useStickyGroupSeparators: true,
  groupSeparatorBuilder: (String value) => Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text(
      value,
      textAlign: TextAlign.left,
      style: TextStyle(fontSize: 18,
          fontWeight: FontWeight.bold),
    ),
  ),
  itemBuilder: (c, element) {
    return Card(
      elevation: 8.0,
      margin: new EdgeInsets.symmetric(horizontal: 10.0,
          vertical: 6.0),
      child: Container(
        child: ListTile(
          contentPadding:
              EdgeInsets.symmetric(horizontal: 20.0,
                  vertical: 10.0),
          //leading: Icon(Icons.account_circle),
          title: Text(
            element['topicName'],
            style: TextStyle(fontSize: 16),
          ),
        ),
      ),
    );
  },
)

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:group_listview_demo/traction_group_seprator.dart';
import 'package:grouped_list/grouped_list.dart';

class GroupListViewDemo extends StatefulWidget {
  @override
  _GroupListViewDemoState createState() => _GroupListViewDemoState();
}

class _GroupListViewDemoState extends State<GroupListViewDemo> {
  List _elements = [
    {'topicName': 'GridView.count', 'group': 'GridView Type'},
    {'topicName': 'GridView.builder', 'group': 'GridView Type'},
    {'topicName': 'GridView.custom', 'group': 'GridView Type'},
    {'topicName': 'GridView.extent', 'group': 'GridView Type'},
    {'topicName': 'ListView.builder', 'group': 'ListView Type'},
    {'topicName': 'StatefulWidget', 'group': 'Type of Widget'},
    {'topicName': 'ListView', 'group': 'ListView Type'},
    {'topicName': 'ListView.separated', 'group': 'ListView Type'},
    {'topicName': 'ListView.custom', 'group': 'ListView Type'},
    {'topicName': 'StatelessWidget', 'group': 'Type of Widget'},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grouped ListView'),
      ),
      body: GroupedListView<dynamic, String>(
        elements: _elements,
        groupBy: (element) => element['group'],
        groupComparator: (value1,
            value2) => value2.compareTo(value1),
        itemComparator: (item1, item2) =>
            item1['topicName'].compareTo(item2['topicName']),
        order: GroupedListOrder.DESC,
        // useStickyGroupSeparators: true,
        groupSeparatorBuilder: (String value) => Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            value,
            textAlign: TextAlign.left,
            style: TextStyle(fontSize: 18,
                fontWeight: FontWeight.bold),
          ),
        ),
        itemBuilder: (c, element) {
          return Card(
            elevation: 8.0,
            margin: new EdgeInsets.symmetric(horizontal: 10.0,
                vertical: 6.0),
            child: Container(
              child: ListTile(
                contentPadding:
                    EdgeInsets.symmetric(horizontal: 20.0,
                        vertical: 10.0),
                //leading: Icon(Icons.account_circle),
                title: Text(
                  element['topicName'],
                  style: TextStyle(fontSize: 16),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

Conclusion:

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

I hope this blog will provide you with sufficient information in Trying up the Grouped ListView in your flutter project. We will show you the Grouped ListView is?, and working 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.

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.

Clap 👏 If this article helps you.

Related: Sortable ListView In Flutter

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

Percent Indicator In Flutter

Animation

Shaiq Khan

-

May 22, 2024

0

In this article, we will explore the Percent Indicator in flutter using the percent indicator package. With the help of the package, we can easily achieve flutter animated percent progress indicators. So let’s get started

We will implement a demo of the percent Indicator that can be easily embedded in your flutter applications.

percent_indicator | Flutter Package
Circular and Linear percent indicators Circle percent indicator Linear percent indicator Toggle animation Custom…pub.dev

The flutter percentage indicator package produces a progress bar indicator that is different or linear from the default progress bar indicator that looks more beautiful. It is used to display the progress indicator time in any application, such as download, installation, uploading, etc. In this plugin, linear indicator and circular indicator are the two important indicators that cover it. Let’s look at its important indicator.

Two ways of percent indicator

CircularProgressIndicator: The CircularProgressIndicator is a widget that shows progress with a circle. It is a circular progress bar that indicates whether the application is busy or on hold.
LinearProgressIndicator: The LinearProgressIndicator is a widget that shows a progress bar in a linear direction and shows that the application is in progress.

Some of the important Percent Indicator attributes:

progressColor — Progress color properties are used for the progress bar so that the progress line can be easily visible and you can change the progress color as per your choice.
percent — The percent defines the percentage as long as the progress bar is animated. It takes a double value from 0 -> 1.
radius — Radius properties define the size of the circle.
center — Center properties define the widget that is in the centre of the progress bar. It can be used by both linear and circular indicators.

Demo Module:

Implementation :

Step 1: Add dependencies.

Add dependencies to pubspec — yaml file.

dependencies:
 percent_indicator: "^2.1.7+2"

Step 2: import the package :

import 'package:percent_indicator/percent_indicator.dart';

Step 3: Run flutter package get

Code Implementation :

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

In this screen, we have shown both the indicator and the circular indicator. In which centre properties are used in which progress bar per cent is initialized. Let us understand this in detail with the help of a reference.

First of all, we have set the percentage timer in the init state which will increase the timer when the progress bar in running them in your application.

@override
void initState() {
  Timer timer;
  timer = Timer.periodic(Duration(milliseconds:1000),(_){
    setState(() {
      percent+=10;
      if(percent >= 100){
        timer.cancel();
        // percent=0;
      }
    });
  });
  super.initState();
}

Now we have taken the circular percent indicator, which has given the background color, the progress color separately, and showed the progress percentage at the centre which will update the progress percentage.

CircularPercentIndicator(
  radius: 120.0,
  lineWidth: 10.0,
  animation: true,
  percent: percent/100,
  center: Text(
    percent.toString() + "%",
    style: TextStyle(
        fontSize: 20.0,
        fontWeight: FontWeight.w600,
        color: Colors.black),
  ),
  backgroundColor: Colors.grey[300],
  circularStrokeCap: CircularStrokeCap.round,
  progressColor: Colors.redAccent,
)

Now we have taken the circular percent indicator, which has given the background color, the progress color separately, and showed the progress percentage at the centre which will update the progress percentage.

LinearPercentIndicator( //leaner progress bar
    animation: true,
    animationDuration: 1000,
    lineHeight: 20.0,
    percent:percent/100,
    center: Text(
      percent.toString() + "%",
      style: TextStyle(
          fontSize: 12.0,
          fontWeight: FontWeight.w600,
          color: Colors.black),
    ),
    linearStrokeCap: LinearStrokeCap.roundAll,
    progressColor: Colors.blue[400],
    backgroundColor: Colors.grey[300],
  ),
),

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

Code File :

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';
class PercentIndicatorDemo extends StatefulWidget {
  @override
  _PercentIndicatorDemoState createState() => _PercentIndicatorDemoState();
}

class _PercentIndicatorDemoState extends State<PercentIndicatorDemo> {

  double percent = 0.0;

  double _height;
  double _width;

  @override
  void initState() {
    Timer timer;
    timer = Timer.periodic(Duration(milliseconds:1000),(_){
      setState(() {
        percent+=10;
        if(percent >= 100){
          timer.cancel();
          // percent=0;
        }
      });
    });
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    _height = MediaQuery.of(context).size.height;
    _width = MediaQuery.of(context).size.width;

    return Scaffold(
        appBar: AppBar(
            title:Text("Percent Indicator Demo"),
            backgroundColor: Colors.redAccent
        ),
        body:Container(
            child:Column(
              mainAxisAlignment:MainAxisAlignment.spaceEvenly,
              crossAxisAlignment:CrossAxisAlignment.center,
              children: <Widget>[

                Column(
                  children: [
                    Text(
                      'Circular Percent Indicator',
                      style: TextStyle(
                          fontStyle: FontStyle.italic,
                          fontWeight: FontWeight.w700,
                          fontSize: 15),
                    ),
                    SizedBox(
                      height: 40,
                    ),
                    Container(
                        padding: EdgeInsets.all(10),
                        child: CircularPercentIndicator(
                          radius: 120.0,
                          lineWidth: 10.0,
                          animation: true,
                          percent: percent/100,
                          center: Text(
                            percent.toString() + "%",
                            style: TextStyle(
                                fontSize: 20.0,
                                fontWeight: FontWeight.w600,
                                color: Colors.black),
                          ),
                          backgroundColor: Colors.grey[300],
                          circularStrokeCap: CircularStrokeCap.round,
                          progressColor: Colors.redAccent,
                        )
                    ),
                  ],
                ),


                Column(
                  children: [
                    Text(
                      'Linear Percent indicator',
                      style: TextStyle(
                          fontStyle: FontStyle.italic,
                          fontWeight: FontWeight.w700,
                          fontSize: 15),
                    ),
                    SizedBox(
                      height: 40,
                    ),

                    Container(
                      margin: EdgeInsets.only(left:30,right:30),
                      alignment:Alignment.center,
                      child: LinearPercentIndicator( //leaner progress bar
                        animation: true,
                        animationDuration: 1000,
                        lineHeight: 20.0,
                        percent:percent/100,
                        center: Text(
                          percent.toString() + "%",
                          style: TextStyle(
                              fontSize: 12.0,
                              fontWeight: FontWeight.w600,
                              color: Colors.black),
                        ),
                        linearStrokeCap: LinearStrokeCap.roundAll,
                        progressColor: Colors.blue[400],
                        backgroundColor: Colors.grey[300],
                      ),
                    ),
                  ],
                ),
              ],
            )
        )
    );
  }
}

Conclusion :

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

I hope this blog will provide you with sufficient information in Trying up the Percent Indicator in your flutter project. We will show you the Percent Indicator is?, and working 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: SMS Using Twilio In Flutter

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

Animated Chart In Flutter

Packages and Plugins

Shaiq Khan

-

May 20, 2024

0

In this article, we will be exploring Animated Chart In Flutter using the fl_chart_package. With the help of this package, we can easily achieve charts and describes some properties and how to use them in your flutter applications. So let’s get started.

fl_chart | Flutter Package
💥 A library to draw fantastic charts in Flutter 💥 ScatterChart Coming Soon Read More Banner designed by…pub.dev

A chart can take various types, however, in general, the chart is a graphical representation of data. Charts tell the user what is the magnitude of data to better understand and predict current and future data. We can show the data through many types of charts such as pie charts, bar charts, line charts, etc. Let us explain all these charts detail in below.

Types Of Chart :

There are a wide variety of charts available to display data. The list below contains those that are most popular and supported by many programs.

Pie Chart: The pie chart is a circle chart. It is a circular chart cut into sections. Each part represents us as a percentage.
Line Chart: A-line chart, alternatively referred to as a line graph, is a graphical depiction of the verified value movements of a line chart resource. It disrupts the information focus with a continuous line displays the value axis displayed on the left side of the chart.
Bar Chart: A bar chart is alternatively known as a graph, a bar chart is a way of grouping clear-cut information into a group. It shows horizontal or vertical bars across the chart horizontally. Displayed at the bottom of the chart. With value.
Scatter Chart: A scatter chart is a kind of plot or mathematical diagram in which two variable values for a data set are displayed using cartesian coordinates. We use a scatter chart to show the correlation between variables and visualize groups of data points.

Demo Module ::

Implementation :

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

fl_chart: latest version

Step 2: Import

import 'package:fl_chart/fl_chart.dart';

Step 3: Run flutter packages get in the root directory of your app.

Code implement in dart file :

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

First of all, we will create four buttons on the home page screen. And we will discuss different charts on each button.

Pie Chart :

In the pie chart, we will use the pie chart class which contains its subclass pie chart data which has section properties in which the list is initialized. In which we have given the color and value of each section.

PieChart(
  PieChartData(
      pieTouchData: PieTouchData(touchCallback: (pieTouchResponse) {
        setState(() {
          if (pieTouchResponse.touchInput is FlLongPressEnd ||
              pieTouchResponse.touchInput is FlPanEnd) {
            touchedIndex = -1;
          } else {
            touchedIndex = pieTouchResponse.touchedSectionIndex;
          }
        });
      }),
      borderData: FlBorderData(
        show: false,
      ),
      sectionsSpace: 0,
      centerSpaceRadius: 60,
      sections: showingSections()),
),

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

Line Chart :

In the line chart, we will use the line chart class which contains its subclass line chart data in which the x-axis data has been initialized in the titles data properties. While the properties of the left tile have data of the Y-axis. We have initialized the color and line of the bar.

LineChart(
  LineChartData(
    lineTouchData: LineTouchData(enabled: true),
    lineBarsData: [
      LineChartBarData(
        spots: [
          FlSpot(0, 1),
          FlSpot(1, 1),
          FlSpot(2, 3),
          FlSpot(3, 4),
          FlSpot(3, 5),
          FlSpot(4, 4)
        ],
        isCurved: true,
        barWidth: 2,
        colors: [
          Colors.orange,
        ],
        belowBarData: BarAreaData(
          show: true,
          colors: [Colors.lightBlue.withOpacity(0.5)],
          cutOffY: cutOffYValue,
          applyCutOffY: true,
        ),
        aboveBarData: BarAreaData(
          show: true,
          colors: [Colors.lightGreen.withOpacity(0.5)],
          cutOffY: cutOffYValue,
          applyCutOffY: true,
        ),
        dotData: FlDotData(
          show: false,
        ),
      ),
    ],
    minY: 0,
    titlesData: FlTitlesData(
      bottomTitles: SideTitles(
          showTitles: true,
          reservedSize: 5,
         // textStyle: yearTextStyle,
          getTitles: (value) {
            switch (value.toInt()) {
              case 0:
                return '2016';
              case 1:
                return '2017';
           
              default:
                return '';
            }
          }),
      leftTitles: SideTitles(
        showTitles: true,
        getTitles: (value) {
          return '\$ ${value + 100}';
        },
      ),
    ),
    axisTitleData: FlAxisTitleData(
        leftTitle: AxisTitle(
            showTitle: true, titleText: 'Value', margin: 10),
        bottomTitle: AxisTitle(
            showTitle: true,
            margin: 10,
            titleText: 'Year',
            textStyle: yearTextStyle,
            textAlign: TextAlign.right)),
    gridData: FlGridData(
      show: true,
      checkToShowHorizontalLine: (double value) {
        return value == 1 || value == 2 || value == 3 || value == 4;
      },
    ),
  ),
)

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

Bar Chart:

In the above, we have used the bar chart class to plot the bar chart. The subclass of which is bar chart data which helps us to change bar chart data graph and gives many options. Using the properties of this widget the user can make modifications as we have used bar touch data and titles data properties.

BarChart(
  BarChartData(
    maxY: 20,
    barTouchData: BarTouchData(
        touchTooltipData: BarTouchTooltipData(
          tooltipBgColor: Colors.grey,
          getTooltipItem: (_a, _b, _c, _d) => null,
        ),
        touchCallback: (response) {
          if (response.spot == null) {
            setState(() {
              touchedGroupIndex = -1;
              showingBarGroups = List.of(rawBarGroups);
            });
            return;
          }
          });
        }),
    titlesData: FlTitlesData(
      show: true,
      bottomTitles: SideTitles(
        showTitles: true,
        getTextStyles: (value) => const TextStyle(
            color: Colors.white70, fontWeight: FontWeight.bold, fontSize: 12),
        margin: 20,
        getTitles: (double value) {
          switch (value.toInt()) {
            case 0:
              return '2015';
        
              return '';
          }
        },
      ),
      leftTitles: SideTitles(
        showTitles: true,
        getTextStyles: (value) => const TextStyle(
            color: Colors.white70, fontWeight: FontWeight.bold, fontSize: 14),
        margin: 32,
        reservedSize: 11,
        getTitles: (value) {
          if (value == 0) {
            return '1K';
          } else if (value == 10) {
            return '5K';
          } else if (value == 19) {
            return '10K';
          } else {
            return '';
          }
        },
      ),
    ),
    borderData: FlBorderData(
      show: false,
    ),
    barGroups: showingBarGroups,
  ),
)

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

Scatter Chart :

In the above, we have used the scatter chart class whose subclass is the scatter chart data which helps us to change the bar chart data graph and gives many options the user can modify using the properties of this widget as we have the bar scatters used the spots property which is of type and used the scatter touch data property which can change the color and value of the data touched by the user.

ScatterChart(
  ScatterChartData(
    scatterSpots: [],
    minX: 0,
    maxX: 10,
    minY: 0,
    maxY: 10,
    borderData: FlBorderData(
      show: false,
    ),
    gridData: FlGridData(
      show: true,
      drawHorizontalLine: true,
      checkToShowHorizontalLine: (value) => true,
      getDrawingHorizontalLine: (value) => FlLine(color: Colors.white.withOpacity(0.1)),
      drawVerticalLine: true,
      checkToShowVerticalLine: (value) => true,
      getDrawingVerticalLine: (value) => FlLine(color: Colors.white.withOpacity(0.1)),
    ),
    titlesData: FlTitlesData(
      show: false,
    ),
    showingTooltipIndicators: selectedSpots,
    scatterTouchData: ScatterTouchData(
      enabled: true,
      handleBuiltInTouches: false,
      touchTooltipData: ScatterTouchTooltipData(
        tooltipBgColor: Colors.black,
      ),
      touchCallback: (ScatterTouchResponse touchResponse) {
      },
    ),
  ),
)

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

Code file :

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

class ScatterChartPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _ScatterChartPageState();
}

class _ScatterChartPageState extends State {
  int touchedIndex;

Color greyColor = Colors.grey;

  List<int> selectedSpots = [];

 int lastPanStartOnIndex = -1;

 double _height;
  double _width;

@override
  Widget build(BuildContext context) {
    _width = MediaQuery.of(context).size.width;
    _height = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(
        title: Text('Scatter Chart Demo'),
      ),
      body: Container(
        //alignment:Alignment.center,
        height: _height / 2.2,
        width: _width,
        margin: EdgeInsets.symmetric(vertical: 80, horizontal: 15),
        child: Card(
          color: Colors.black54,
          child: ScatterChart(
            ScatterChartData(
              scatterSpots: [
                ScatterSpot(
                  4,
                  5,
                  color: selectedSpots.contains(2)
                      ? Colors.purpleAccent
                      : greyColor,
                  radius: 8,
                ),
                ScatterSpot(
                  8,
                  6,
                  color: selectedSpots.contains(3) ?
                  Colors.orange : greyColor,
                  radius: 20,
                ),
                ScatterSpot(
                  5,
                  7,
                  color: selectedSpots.contains(4) ?
                  Colors.brown : greyColor,
                  radius: 14,
                ),
                ScatterSpot(
                  7,
                  2,
                  color: selectedSpots.contains(5)
                      ? Colors.lightGreenAccent
                      : greyColor,
                  radius: 18,
                ),
                ScatterSpot(
                  3,
                  2,
                  color: selectedSpots.contains(6) ?
                  Colors.red : greyColor,
                  radius: 36,
                ),
              ],
              minX: 0,
              maxX: 10,
              minY: 0,
              maxY: 10,
              borderData: FlBorderData(
                show: false,
              ),
              gridData: FlGridData(
                show: true,
                drawHorizontalLine: true,
                checkToShowHorizontalLine: (value) => true,
                getDrawingHorizontalLine: (value) =>
                    FlLine(color: Colors.white.withOpacity(0.1)),
                drawVerticalLine: true,
                checkToShowVerticalLine: (value) => true,
                getDrawingVerticalLine: (value) =>
                    FlLine(color: Colors.white.withOpacity(0.1)),
              ),
              titlesData: FlTitlesData(
                show: false,
              ),
              showingTooltipIndicators: selectedSpots,
              scatterTouchData: ScatterTouchData(
                enabled: true,
                handleBuiltInTouches: false,
                touchTooltipData: ScatterTouchTooltipData(
                  tooltipBgColor: Colors.black,
                ),
                touchCallback: (ScatterTouchResponse touchResponse) {
                  if (touchResponse.touchInput is FlPanStart) {
                    lastPanStartOnIndex = touchResponse.
                    touchedSpotIndex;
                  } else if (touchResponse.touchInput is FlPanEnd) {
                    final FlPanEnd flPanEnd =
                        touchResponse.touchInput;

                        if (flPanEnd.velocity.pixelsPerSecond <=
                        const Offset(4, 4)) {
                      // Tap happened
                      setState(() {
                        if (selectedSpots.contains
                          (lastPanStartOnIndex)) {
                          selectedSpots.remove(lastPanStartOnIndex);
                        } else {
                          selectedSpots.add(lastPanStartOnIndex);
                        }
                      });
                    }
                  }
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Conclusion :

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

I hope this blog will provide you with sufficient information in Trying up the Animated Chart in your flutter project. We will show you the Percent Indicator is?, and working 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.

CupertinoActivityIndicator In Flutter

Widgets

Shaiq Khan

-

May 20, 2024

0

Displaying Future data In an app is an everyday task in modern applications. As most of the data come from the APIs there comes in need of using proper loading Indicators before the data comes in place. Progress Indicators are a Quintessential tool in modern applications as they provide us with the ease of customizing the User-Interface of the app as per user needs by creating a uniformity displaying of API results data. They also provide the app its fondness and customizability as per particular needs. If your flutter app constitutes Cupertino widgets mainly then a good idea would be to use the CupertinoActivityIndicator as a progress indicator.

CupertinoActivityIndicator is the Cupertino version of the material circular progress indicator. It animates in a clockwise circle. Flutter possesses in its store a widget to perform this task with ease & perfection Using CupertinoActivityIndicator.

If you are requiring a progress indicator for cupertino widgets then the below mentioned is the widget for you :

Watch this video By Flutter for more info on the topic :

What is Flutter?

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ”

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

Flutter Is Proudly Entrusted By These Organizations For their Products : — Flutter Showcase

CupertinoActivityIndicator Syntax :

: Add the CupertinoActivityIndicator() widget .

: Define boolean value to animating property with it being set to false for freezed kind of progress indicator and being set to true if progress indicator is needed to animate.

: Define double value to radius determining progress indicator size to be displayed.

CupertinoActivityIndicator(  
 animating: true,
 radius: _kDefaultIndicatorRadius,
 Key: key)

Using Along with FutureBuilder :

Api Handlers | Circular Progress Indicator are mainly functional for awaiting Non-Deterministic behavior.

So one way to Incorporate it into your app is to wrap it inside a FutureBuilder Widget. This way, CupertinoActivityIndicator will appear while your app is loading data and disappear when your data is ready.

FutureBuilder<String>(
future: _fetchData
builder:(context,snapshot){
if(snapshot.hasData){
     return /////;
      } else {
return CupertinoActivityIndicator(  
animating: false,radius: 10
       )
    }
  }
)

When you run this Flutter application, you would get the CupertinoActivityIndicator displayed in UI as shown below :

How the widget will likely work in your App

Understanding Widget Elements :

CupertinoActivityIndicator.partiallyRevealed: Another type of Cupertino activity indicator that displays a partial ticker based on the progress value provided.

: animating: Whether the activity Indicator is running its animation or not

: radius: radius of the spinner displayed

: key : controls widget replacing activity

Enabling For Flutter Web

CupertinoActivityIndicator Performs the Same for flutter web as well by changing the channel to development mode as current web is enabled in the beta channel.

Use the following commands to switch channels and enabling flutter web

flutter channel beta
flutter upgrade
flutter config — enable-web

Add-On Web to your project & run the project to web view

flutter create .
flutter run -d chrome

Closing Thoughts

In this blog, we explored the CupertinoActivityIndicator widget provided by Flutter for creating an iOS-style activity indicator that spins clockwise. The key purpose of this article is to avail you of an Insight into How we can create CupertinoActivityIndicator based flutter application using the official flutter widget.

If you have not used CupertinoActivityIndicator, I hope this article has provided you with content information about what’s all about it and you will give it — a Try.

Initiate using CupertinoActivityIndicator for your apps. !!

References For the Blog :

CupertinoActivityIndicator class
API docs for the CupertinoActivityIndicator class from the cupertino library, for the Dart programming language.api.flutter.dev

Progress Indicators – Controls – iOS – Human Interface Guidelines – Apple Developer
Don’t make people sit around staring at a static screen waiting for your app to load content or perform lengthy data…developer.apple.com

🌸🌼🌸 Thank you for reading. 🌸🌼🌸🌼

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 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

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

Email Customization In Flutter

Developers

Shaiq Khan

-

May 20, 2024

0

Digital Communication Is an Integral part of communication in today’s era to help us in getting the message quicker & broader. Over the years, Email has always been one of the most popular modes of official textual communications. Mobile provides us the ability to send in an email from remote locations where you may not have enough time to formulate mail. In this article, we’ll send emails using a custom mailer template by using the Sendinblue email provider.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_sendinblue/api-provider.dart';
import 'package:fluttertoast/fluttertoast.dart';

class HomeView extends StatefulWidget {
  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  var sNameController = TextEditingController();
  var rNameController = TextEditingController();
  var sEmailController = TextEditingController();
  var rEmailController = TextEditingController();
  var subController = TextEditingController();
  var _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text("Send Email"),
        ),
        body: Container(
          margin: const EdgeInsets.all(20),
          child: Form(
            key: _formKey,
            child: Column(
              children: [
                TextField(
                  controller: sNameController,
                  decoration: InputDecoration(
                    labelText: "Sender's Name",
                    labelStyle: TextStyle(
                      color: Colors.black,
                    ),
                    border: OutlineInputBorder(),
                    focusedBorder: OutlineInputBorder(),
                  ),
                ),

                SizedBox(height: 10,),

                TextFormField(
                  controller: sEmailController,
                  validator: (value) {
                    if (value.isEmpty ||
                        !RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
                            .hasMatch(value)) {
                      return 'Enter a valid email!';
                    }
                    return null;
                  },
                  decoration: InputDecoration(
                    labelText: "Enter sender's email id ",
                    labelStyle: TextStyle(
                      color: Colors.black,
                    ),
                    border: OutlineInputBorder(),
                    focusedBorder: OutlineInputBorder(),
                  ),
                ),
                SizedBox(height: 10,),

                TextField(
                  controller: subController,
                  decoration: InputDecoration(
                    labelText: "Subject",
                    labelStyle: TextStyle(
                      color: Colors.black,
                    ),
                    border: OutlineInputBorder(),
                    focusedBorder: OutlineInputBorder(),
                  ),
                ),
                SizedBox(height: 10,),

                TextFormField(
                  controller: rNameController,
                  decoration: InputDecoration(
                    labelText: "Receiver's Name",
                    labelStyle: TextStyle(
                      color: Colors.black,
                    ),
                    border: OutlineInputBorder(),
                    focusedBorder: OutlineInputBorder(),
                  ),
                ),
                SizedBox(height: 10,),
                TextFormField(

                  controller: rEmailController,
                  validator: (value) {
                    if (value.isEmpty ||
                        !RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
                            .hasMatch(value)) {
                      return 'Enter a valid email!';
                    }
                    return null;
                  },
                  decoration: InputDecoration(
                    labelText: "Enter receiver's email id ",
                    labelStyle: TextStyle(
                      color: Colors.black,
                    ),
                    border: OutlineInputBorder(),
                    focusedBorder: OutlineInputBorder(),
                  ),
                ),

                SizedBox(height: 10,),

                RaisedButton(onPressed: (){
                  //String senderName, String receiverName, String sEmail, String rEmail,String sub,
                  if(_formKey.currentState.validate()){
                    new ApiProvider().sendEmail(sNameController.text.toString(),
                        rNameController.text,sEmailController.text,rEmailController.text,
                        subController.text,context).then((value){
                      if(value!=null){
                        Fluttertoast.showToast(
                            msg: "Email Send",
                            toastLength: Toast.LENGTH_SHORT,
                            gravity: ToastGravity.CENTER,
                            timeInSecForIosWeb: 1,
                            backgroundColor: Colors.red,
                            textColor: Colors.white,
                            fontSize: 16.0
                        );
                      }
                    });
                  }
                  _formKey.currentState.save();
                },
                child: Text('Send Mail'),)
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Output

Conclusion

In this article, I have explained the Sendinblue package demo which you can modify and experiment with according to your own. This little introduction was about customized the email template.

I hope this blog will provide you with sufficient information in trying up to use the send email in your flutter projects. We will show this demo program for working Sendinblue in your flutter applications. So please try it.

❤ ❤ Thanks for reading this article ❤❤

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.

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

Clap 👏 If this article helps you.

Related: SMS Using Twilio In Flutter

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

Modal Bottom Sheet In Flutter

Widgets

Shaiq Khan

-

May 20, 2024

0

In this blog, we will explore the Modal Bottom Sheet Widget In Flutter. We will also implement a demo of the Modal Bottom Sheet Widget, and describes its properties. and how to use them in your flutter applications.

Table Of Contents::

Flutter

Modal Bottom Sheet

Code Implement

Code File

Conclusion

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time It means that you can use one programming language and one codebase to create two different apps (for iOS and Android)”.

Modal Bottom Sheet :

The bottom sheet material is a very good component given by design. It is like a dialog that is open from the bottom. We use the sheet below when we have to show some options for the user to proceed. And here you can use any widget as per your requirement.

Two Required Properties of the Modal Bottom Sheet :

BuildContext: The build context for a particular widget can change the location over time. Because it helps the creation method to determine which widget it is going to pull and it also helps in determining the position of the widget to be pulled in the widget tree.

WidgetBuilder: The builder widget needs to pass a widget, but only has a function that returns the widget.

Some Optional Properties of the Modal Bottom Sheet :

shape: Using shape properties, we can give a circular border and color of the border according to our own.
background: Using shape properties, we can give a circular border and color of the border according to our own.
elevation: The elevation property is used to raise the shadow of the bottom sheet and it is an optional property.

Demo Module :

Code Implementation :

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

First of all, we will create one button on the modal bottom sheet page screen. And we will open the sheet at the click.

Now, at the click of a button, we will show the bottom sheet in which the column has been taken inside the bottom sheet and used the List Tile widget inside the column widget, in which some images and titles are displayed.

Let us understand this with the help of a reference.

showModalBottomSheet(
    context: context,
    builder: (context) {
      return Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            leading: new Icon(Icons.photo),
            title: new Text('Photo'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: new Icon(Icons.music_note),
            title: new Text('Music'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: new Icon(Icons.videocam),
            title: new Text('Video'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: new Icon(Icons.share),
            title: new Text('Share'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
        ],
      );
    });

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';

class ModalBottomSheet extends StatefulWidget {
  @override
  _ModalBottomSheetState createState() => _ModalBottomSheetState();
}

class _ModalBottomSheetState extends State<ModalBottomSheet> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Modal Bottom Sheet',
          style: TextStyle(color: Colors.white),
        ),
        centerTitle: true,
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "MODAL BOTTOM SHEET EXAMPLE",
              style: TextStyle(
                  fontStyle: FontStyle.italic,
                  letterSpacing: 0.4,
                  fontWeight: FontWeight.w600),
            ),
            SizedBox(
              height: 20,
            ),
            RaisedButton(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10.0))),
              onPressed: () {
                showModalBottomSheet(
                    context: context,
                    builder: (context) {
                      return Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          ListTile(
                            leading: new Icon(Icons.photo),
                            title: new Text('Photo'),
                            onTap: () {
                              Navigator.pop(context);
                            },
                          ),
                          ListTile(
                            leading: new Icon(Icons.music_note),
                            title: new Text('Music'),
                            onTap: () {
                              Navigator.pop(context);
                            },
                          ),
                          ListTile(
                            leading: new Icon(Icons.videocam),
                            title: new Text('Video'),
                            onTap: () {
                              Navigator.pop(context);
                            },
                          ),
                          ListTile(
                            leading: new Icon(Icons.share),
                            title: new Text('Share'),
                            onTap: () {
                              Navigator.pop(context);
                            },
                          ),
                        ],
                      );
                    });
              },
              padding:
                  EdgeInsets.only(left: 30, right: 30, top: 15, bottom: 15),
              color: Colors.pink,
              child: Text(
                'Click Me',
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w600,
                    letterSpacing: 0.6),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion:

In this article, I have explained a Modal Bottom Sheet demo, which you can modify and experiment with according to your own. This little introduction was from the Modal Bottom Sheet widget from our side.

I hope this blog will provide you with sufficient information in Trying up the Modal Bottom Sheet widget in your flutter project. We will show you the Modal Bottom Sheet is?, and working on it in your flutter applications, So please try it.

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

Clap 👏 If this article helps you.

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

❤ ❤ Thanks for reading this article ❤❤

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.

Expansion Tile In Flutter

Widgets

Shaiq Khan

-

May 20, 2024

0

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

The expansion tile widget is a very useful widget. This widget lets you create a detailed tile that can be used as part of a list view. We need to show some detailed information on the list for many applications, but for this, we do not have enough space to expand and collapse the list. Then we can create it with the extension tile widget.

Following Some Properties of the Expansions Tile :

title — The Title property allows you to choose the title for the expansion tile widget. This will be an item that will always be visible to the user.
children — The children’s property holds any number of widgets. It can be a card for a simple text. And the extension tiles will know this only by clicking on the title of the widget.
leading — The leading property is used on the first left side of the title, just as the leading list tile widget uses leading, similarly this feature works here.
trailing — Use the trailing property to the right after the title, you can use text and icons in this property.
backgroundColor — Using the background property gives color to the background of the expanded tile. Note, it assigns a color to the extended tile, not the title.

Demo Module :

In this screen, we will create a list with the help of a list view builder in which the expansion tile widget will be used and initialize the list data into the

Code Implementation :

You need to implement it in your code respectively:

Create a new dart file called expansion_title_demo.dart inside the libfolder.

In this screen, we will create a list with the help of a list view builder in which the expansion tile widget will be used and initialize the list data into the expansion tile widget. Let’s understand it with the help of a reference.

ExpansionTile(
  title: Text(
    items.playerName,
    style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
  ),
  children: <Widget>[
    ListTile(
      title: Text(
        items.description,
        style: TextStyle(fontWeight: FontWeight.w700),
      ),
    )
  ],
),

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_expansion_tile_demo/Constants/Constants.dart';
import 'package:flutter_expansion_tile_demo/model/month_model.dart';

class ExpansionTileDemo extends StatefulWidget {
  @override
  _ExpansionTileDemoState createState() => _ExpansionTileDemoState();
}

class _ExpansionTileDemoState extends State<ExpansionTileDemo> {
  List<MonthModel> monthModel;

  @override
  void initState() {
    monthModel = Constants.getMonthModel();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Expansion Tile Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 0.0),
        child: ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          physics: BouncingScrollPhysics(),
          itemCount: monthModel.length,
          itemBuilder: (BuildContext context, int index) {
            return _buildPlayerModelList(monthModel[index]);
          },
        ),
      ),
    );
  }

  Widget _buildPlayerModelList(MonthModel items) {
    return Card(
      child: ExpansionTile(
        title: Text(
          items.playerName,
          style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
        ),
        children: <Widget>[
          ListTile(
            title: Text(
              items.description,
              style: TextStyle(fontWeight: FontWeight.w700),
            ),
          )
        ],
      ),
    );
  }
}

Conclusion:

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

I hope this blog will provide you with sufficient information in Trying up the Expansion Tile in your flutter project. We showed you what the Expansion Tile 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: Slidable Tile In Flutter

Related: SMS Using Twilio In Flutter

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

Vertical Card Pager In Flutter

Widgets

Shaiq Khan

-

May 17, 2024

0

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 blog, we will explore the Vertical Card Pager In Flutter. We will also implement a demo of the Vertical Card Pager, and describes its properties. and how to use them in your flutter applications. So let’s get started.

titles: The title property is used to display some of its details in the card, it is a type of list.
align: You can use the align property to arrange the list item, according to it according to left, centre and right.
images: We use the images property to display the image in the list item, it is a type of list.
textStyle: Using the text style property, we can reduce the size of the text of the title and change the color of the text.

Demo Module :

Implementation :

You need to implement it in your code respectively :

Step 1: Add dependencies.

Add dependencies to pubspec — yaml file.

dependencies:
vertical_card_pager: ^1.4.0

Step 2: import the package :

import 'package:vertical_card_pager/vertical_card_pager.dart';

Step 3: Run flutter package get

How to implement code in dart file :

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

First of all, we have created a list of the titles in which we have named the tiles.

final List<String> titles = [
  "RED",
  "YELLOW",
  "CYAN",
  "BLUE",
  "GREY",
];

Before using this widget, an image variable has been defined which is list type. In this, we have given the color of the items which have been defined in the images property.

final List<Widget> images = [
  Container(
    decoration: BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.all(Radius.circular(10)),
    ),
  ),
  Container(
    decoration: BoxDecoration(
      color: Colors.yellow,
      borderRadius: BorderRadius.all(Radius.circular(10)),
    ),
  ),
  Container(
    decoration: BoxDecoration(
      color: Colors.cyan,
      borderRadius: BorderRadius.all(Radius.circular(10)),
    ),
  ),
  Container(
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.all(Radius.circular(10)),
    ),
  ),
  Container(
    decoration: BoxDecoration(
      color: Colors.grey,
      borderRadius: BorderRadius.all(Radius.circular(10)),
    ),
  ),
];

Before using this widget, we have created a container inside which uses the vertical card widget, in this, we have given the color of the item which is of list type in its titles and image properties and centre the list item.

These are snapshots image after running the app.

Code File :

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

class VerticalCardPagerDemo extends StatefulWidget {
  @override
  _VerticalCardPagerDemoState createState() => _VerticalCardPagerDemoState();
}

class _VerticalCardPagerDemoState extends State<VerticalCardPagerDemo> {
  final List<String> titles = [
    "RED",
    "YELLOW",
    "CYAN",
    "BLUE",
    "GREY",
  ];

  @override
  Widget build(BuildContext context) {
    final List<Widget> images = [
      Container(
        decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
      ),
      Container(
        decoration: BoxDecoration(
          color: Colors.yellow,
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
      ),
      Container(
        decoration: BoxDecoration(
          color: Colors.cyan,
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
      ),
      Container(
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
      ),
      Container(
        decoration: BoxDecoration(
          color: Colors.grey,
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
      ),
    ];
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Vertical Card Pager',
          style: TextStyle(color: Colors.white),
        ),
        centerTitle: true,
      ),
      body: SafeArea(
        child: Expanded(
          child: Container(
            child: VerticalCardPager(
              textStyle:
                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
              titles: titles,
              images: images,
              onPageChanged: (page) {},
              align: ALIGN.CENTER,
              onSelectedItem: (index) {},
            ),
          ),
        ),
      ),
    );
  }
}

Conclusion :

In the article, I have explained the basic structure of Vertical Card Pager in a flutter; you can modify this code according to your choice. This was a small introduction to Vertical Card Pager On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information in Trying up the Vertical Card Pager in your flutter project. We will show you the Vertical Card Pager 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: Card Selector In Flutter

Related: Credit Card View In Flutter

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

Swiper In Flutter

Packages and Plugins

Shaiq Khan

-

May 17, 2024

0

In this article, we will explore the Swiper in flutter using the fluter_swiper_package. With the help of the package, we can easily achieve flutter animated Swiper. So let’s get started.

We will implement a demo of the Swiper that can be easily embedded in your flutter applications.

flutter_swiper | Flutter Package
中文说明 The best swiper for flutter , with multiple layouts, infinite loop. Compatible with Android & iOS. We are using…pub.dev

scrollDirection: The scroll direction property is to give the direction of the scroll that we can scroll the list in the vertical or horizontal direction.
autoplay: We use the autoplay property when we have to move one of the lists, it is of type bool.
physics: We use the Physics property to do scrolling. It determines when the user reaches the maximum scroll limit or stops scrolling.
controller: The controller is used to control the index of the swiper, start or stop autoplay.
index: The index property is the index number of the initial slide that initiates the slide and updates the previous index.
loop: We can use the loop property to continuously rotate the list

Demo Module :

Implementation :

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies :

flutter_swiper: ^1.1.6

Step 2: Importing

import 'package:flutter_swiper/flutter_swiper.dart';

Step 3: Run flutter package get

Code Implementation :

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

First of all, we have created a home page screen in which four buttons have been created and at the click of each button, a new page will open in which we have shown the swiper list in different ways.

Default Swiper :

In the default swiper, we have listed an image and used the default layout in the swiper class whose scroll direction is horizontal. Let us understand this in detail with the help of a reference.

Swiper(
  scrollDirection:Axis.horizontal,
  itemBuilder:(BuildContext context, int index) {
    return _buildSwiperList(imageModel[index],index);
  },
  itemCount: imageModel.length,
  // pagination: new SwiperPagination(),
  layout: SwiperLayout.DEFAULT,
),

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

Stack Swiper :

In the stack swiper, we have listed an image and used the stack layout in the swiper class in which the items are positioned on top of each other which allows the items to overlap and render them from bottom to top. Let us understand this in detail with the help of a reference.

Swiper(
  itemBuilder:(BuildContext context, int index) {
    return _buildSwiperList(imageModel[index],index);
  },
  itemCount: imageModel.length,
  itemWidth:DeviceSize.width(context),
  layout: SwiperLayout.STACK,
),

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

Tinder Swiper :

In tinder swiper, we have listed an image and used the Tinder layout in the swiper class in which the item is positioned on top of each other which swaps the item very quickly. Let us understand this in detail with the help of a reference.

Swiper(
  itemBuilder:(BuildContext context, int index) {
    return _buildSwiperList(imageModel[index],index);
  },
  itemWidth:DeviceSize.width(context),
  itemHeight:DeviceSize.height(context)/3,
  itemCount: imageModel.length,
  layout: SwiperLayout.TINDER,
 // control:SwiperControl(),
),

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

Pagination Swiper :

In this screen, we have used the pagination property, in which a list of an image whose layout property is of custom type has used animation in its custom layout option. Let us understand this in detail with the help of a reference.

Swiper(
  itemBuilder: (BuildContext context, int index) {
    return _buildSwiperList(imageModel[index], index);
  },

  itemWidth: DeviceSize.width(context),
  itemHeight: DeviceSize.height(context) / 3,
  itemCount: imageModel.length,
  layout: SwiperLayout.CUSTOM,
  pagination: SwiperPagination(),
  customLayoutOption:
      new CustomLayoutOption(startIndex: -1, stateCount: 3)
          .addRotate([-45.0 / 180, 0.0, 45.0 / 180]).addTranslate([
    new Offset(-340.0, -40.0),
    new Offset(0.0, 0.0),
    new Offset(340.0, -40.0)
  ]),
  // control:SwiperControl(),
),

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_swiper/flutter_swiper.dart';
import 'package:flutter_swiper_demo/Constants/Constants.dart';
import 'package:flutter_swiper_demo/modal/image_model.dart';
import 'package:flutter_swiper_demo/themes/device_size.dart';

class CustomSwiperPagination extends StatefulWidget {
  @override
  _CustomSwiperPaginationState createState() => _CustomSwiperPaginationState();
}

class _CustomSwiperPaginationState extends State<CustomSwiperPagination> {
  List<ImageModel> imageModel;

  @override
  void initState() {
    imageModel = Constants.getImageModel();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Swiper Pagination'),
      ),
      body: Center(
        child: Container(
          height: DeviceSize.height(context) / 3,
          width: DeviceSize.width(context),
          alignment: Alignment.center,
          child: Swiper(
            itemBuilder: (BuildContext context, int index) {
              return _buildSwiperList(imageModel[index], index);
            },

            itemWidth: DeviceSize.width(context),
            itemHeight: DeviceSize.height(context) / 3,
            itemCount: imageModel.length,
            layout: SwiperLayout.CUSTOM,
            pagination: SwiperPagination(),
            customLayoutOption:
                new CustomLayoutOption(startIndex: -1, stateCount: 3)
                    .addRotate([-45.0 / 180, 0.0, 45.0 / 180]).addTranslate([
              new Offset(-340.0, -40.0),
              new Offset(0.0, 0.0),
              new Offset(340.0, -40.0)
            ]),
            // control:SwiperControl(),
          ),
        ),
      ),
    );
  }

  Widget _buildSwiperList(ImageModel items, int index) {
    return Container(
      margin: EdgeInsets.only(left: 15, right: 15),
      height: DeviceSize.height(context) / 6,
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(10)),
        child: Image.asset(
          items.img,
          fit: BoxFit.fill,
        ),
      ),
    );
  }
}

Conclusion :

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

I hope this blog will provide you with sufficient information in Trying up the Percent Indicator in your flutter project. We will show you the swiper 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: SMS Using Twilio In Flutter

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

Table of Contents :

Flutter :

Physical Model Widget:

The default constructor of the Physical Model is given below:

Following Properties of the Physical Model:

Code Implementation:

Code File:

Conclusion:

group_list_ library

Table Of Contents:

Grouped List View:

Required Properties of the Grouped ListView:

Optional Properties of the Grouped ListView:

Implementation :

Code Implementation

Code File:

Conclusion:

In this article, we will explore the Percent Indicator in flutter using the percent indicator package. With the help of the package, we can easily achieve flutter animated percent progress indicators. So let’s get started

Table Of Contents :

Flutter :

Percent Indicator :

Two ways of percent indicator

Some of the important Percent Indicator attributes:

Implementation :

Code Implementation :

Code File :

Conclusion :

Table Of Contents :

FL Chart :

Types Of Chart :

Implementation :

Code implement in dart file :

Pie Chart :

Line Chart :

Bar Chart:

Scatter Chart :

Code file :

Conclusion :

What is Flutter?

CupertinoActivityIndicator Syntax :

Using Along with FutureBuilder :

Understanding Widget Elements :

Enabling For Flutter Web

Closing Thoughts

References For the Blog :

🌸🌼🌸 Thank you for reading. 🌸🌼🌸🌼

Table of Contents :

Introduction:

Create a Template:

Creating the API request:

Code File :

Conclusion

Table Of Contents::

Flutter :

Modal Bottom Sheet :

Two Required Properties of the Modal Bottom Sheet :

Some Optional Properties of the Modal Bottom Sheet :

Code Implementation :

Code File:

Conclusion:

Table of Contents :

Flutter :

Expansions Tile Widget :

Following Some Properties of the Expansions Tile :

Code Implementation :

Code File:

Conclusion:

Table of Contents :

Vertical Card Pager :

Implementation :

How to implement code in dart file :

Code File :

Conclusion :

Table Of Contents :

Swiper :

Implementation :

Code Implementation :

Default Swiper :

Stack Swiper :

Tinder Swiper :