Forem: Aadarsh Kunwar

What's going on here

Aadarsh Kunwar — Tue, 24 Feb 2026 11:12:41 +0000

Newwww

Hello Guys back after almost 8 months

Aadarsh Kunwar — Wed, 06 Aug 2025 05:27:44 +0000

Now i'll rise again

What's new in Flutter 3.27

Aadarsh Kunwar — Thu, 19 Dec 2024 10:29:41 +0000

🦋 Impeller is now the default on Vulkan-enabled Android devices
🍏 Improvements to Cupertino widget fidelity
🛠 New DevTools Inspector
and more!

Read the blog → https://goo.gle/3VAJedw

Beautiful Animations with CustomPaint in Flutter

Aadarsh Kunwar — Fri, 25 Oct 2024 05:49:26 +0000

I've used CustomPaint to create stunning animations like rotating squares and expanding circles, giving a unique look to Flutter apps. It's a powerful tool for customized UI designs. Check out the full code in my GitHub repo: github.com/aadarshk7/flutter_utils 💻

Flutter #CustomPaint #Animations #UI #GitHub

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

void main() {
  runApp(MaterialApp(
    home: CombinedAnimationScreen(),
  ));
}

class CombinedAnimationScreen extends StatefulWidget {
  @override
  _CombinedAnimationScreenState createState() =>
      _CombinedAnimationScreenState();
}

class _CombinedAnimationScreenState extends State<CombinedAnimationScreen>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();

    // Initialize the AnimationController
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 4),
    )..repeat(reverse: true); // Repeat animation
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [Color(0xFF00F260), Color(0xFF0575E6)],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: Center(
          child: AnimatedBuilder(
            animation: _controller,
            builder: (context, child) {
              return Stack(
                alignment: Alignment.center,
                children: [
                  // Custom paint for the expanding and contracting circles
                  CustomPaint(
                    painter: ExpandingCirclesPainter(_controller.value),
                    child: SizedBox(
                      width: 300,
                      height: 300,
                    ),
                  ),
                  // Custom paint for the rotating square
                  CustomPaint(
                    painter: RotatingSquarePainter(_controller.value),
                    child: SizedBox(
                      width: 150,
                      height: 150,
                    ),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

class ExpandingCirclesPainter extends CustomPainter {
  final double progress;

  ExpandingCirclesPainter(this.progress);

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);

    // Gradient paint with fading effect
    final paint = Paint()
      ..style = PaintingStyle.fill
      ..color = Colors.deepPurple.withOpacity(1.0 - progress);

    // Draw multiple expanding circles
    for (int i = 1; i <= 5; i++) {
      final radius = (size.width / 10) * i * progress;
      canvas.drawCircle(center, radius, paint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

class RotatingSquarePainter extends CustomPainter {
  final double progress;

  RotatingSquarePainter(this.progress);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..style = PaintingStyle.fill
      ..shader = LinearGradient(
        colors: [Colors.deepPurpleAccent, Colors.orangeAccent, Colors.pink],
        stops: [0.3, 0.6, 1.0],
      ).createShader(Rect.fromLTWH(0, 0, size.width, size.height));

    final center = Offset(size.width / 2, size.height / 2);
    final side = size.width / 2;

    // Apply rotation transformation
    canvas.save();
    canvas.translate(center.dx, center.dy);
    canvas.rotate(2 * pi * progress);
    canvas.translate(-center.dx, -center.dy);

    final rect = Rect.fromCenter(center: center, width: side, height: side);
    canvas.drawRect(rect, paint);

    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

Slider in Flutter

Aadarsh Kunwar — Fri, 04 Oct 2024 06:35:42 +0000

Creating a slider in Flutter is straightforward using the Slider widget. Here’s a simple example that demonstrates how to implement a slider with a label showing the current value:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Slider Example')),
        body: Center(
          child: SliderExample(),
        ),
      ),
    );
  }
}

class SliderExample extends StatefulWidget {
  @override
  _SliderExampleState createState() => _SliderExampleState();
}

class _SliderExampleState extends State<SliderExample> {
  double _sliderValue = 0.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Slider(
          value: _sliderValue,
          min: 0.0,
          max: 100.0,
          divisions: 10,
          label: _sliderValue.round().toString(),
          onChanged: (double newValue) {
            setState(() {
              _sliderValue = newValue;
            });
          },
        ),
        Text(
          'Slider Value: ${_sliderValue.round()}',
          style: TextStyle(fontSize: 20),
        ),
      ],
    );
  }
}

Explanation
Slider Widget: The main component used to create the slider.

value: Current value of the slider.

min: Minimum value the slider can take.
max: Maximum value the slider can take.
divisions: Optional. Specifies the number of discrete divisions in the slider.
label: Displays the current value of the slider when it’s moved.
onChanged: A callback that is called whenever the slider value changes. State Management: The slider value is managed using a stateful widget, allowing the UI to update whenever the slider value changes.

Text Widget: Displays the current value of the slider beneath it.

Customizing the Slider
You can customize the appearance of the slider further by adjusting properties like activeColor, inactiveColor, or using a SliderTheme. Here’s a quick example of how to customize the slider’s colors:

Slider(
  value: _sliderValue,
  min: 0.0,
  max: 100.0,
  divisions: 10,
  label: _sliderValue.round().toString(),
  activeColor: Colors.blue,
  inactiveColor: Colors.grey,
  onChanged: (double newValue) {
    setState(() {
      _sliderValue = newValue;
    });
  },
)

Back after a gap because of my exams

Aadarsh Kunwar — Fri, 04 Oct 2024 06:33:50 +0000

Flutter Date and Time Picker

Aadarsh Kunwar — Sun, 15 Sep 2024 16:31:10 +0000

In Flutter, you can use the built-in showDatePicker and showTimePicker functions to display date and time pickers. Below are examples of how to implement both.

Date Picker You can use showDatePicker to display a date picker dialog and retrieve the selected date.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DateTimePickerDemo(),
    );
  }
}

class DateTimePickerDemo extends StatefulWidget {
  @override
  _DateTimePickerDemoState createState() => _DateTimePickerDemoState();
}

class _DateTimePickerDemoState extends State<DateTimePickerDemo> {
  DateTime? selectedDate;

  Future<void> _selectDate(BuildContext context) async {
    final DateTime? pickedDate = await showDatePicker(
      context: context,
      initialDate: DateTime.now(), // Current date
      firstDate: DateTime(2000), // Earliest date
      lastDate: DateTime(2101),  // Latest date
    );

    if (pickedDate != null && pickedDate != selectedDate)
      setState(() {
        selectedDate = pickedDate;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Date Picker")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedDate == null
                  ? 'No date selected!'
                  : 'Selected date: ${selectedDate.toString()}',
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _selectDate(context),
              child: Text('Select Date'),
            ),
          ],
        ),
      ),
    );
  }
}

Time Picker Similarly, you can use **showTimePicker **to display a time picker dialog.

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? pickedTime = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
  );

  if (pickedTime != null)
    setState(() {
      selectedTime = pickedTime;
    });
}

To include both date and time pickers, you can modify the code to add a time picker next to the date picker.

Date and Time Picker Combined

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DateTimePickerDemo(),
    );
  }
}

class DateTimePickerDemo extends StatefulWidget {
  @override
  _DateTimePickerDemoState createState() => _DateTimePickerDemoState();
}

class _DateTimePickerDemoState extends State<DateTimePickerDemo> {
  DateTime? selectedDate;
  TimeOfDay? selectedTime;

  Future<void> _selectDate(BuildContext context) async {
    final DateTime? pickedDate = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2101),
    );
    if (pickedDate != null && pickedDate != selectedDate)
      setState(() {
        selectedDate = pickedDate;
      });
  }

  Future<void> _selectTime(BuildContext context) async {
    final TimeOfDay? pickedTime = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );
    if (pickedTime != null && pickedTime != selectedTime)
      setState(() {
        selectedTime = pickedTime;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Date & Time Picker")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedDate == null
                  ? 'No date selected!'
                  : 'Selected date: ${selectedDate.toString()}',
            ),
            Text(
              selectedTime == null
                  ? 'No time selected!'
                  : 'Selected time: ${selectedTime.format(context)}',
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _selectDate(context),
              child: Text('Select Date'),
            ),
            ElevatedButton(
              onPressed: () => _selectTime(context),
              child: Text('Select Time'),
            ),
          ],
        ),
      ),
    );
  }

Explanation:

showDatePicker: Opens a date picker and returns the selected date.
showTimePicker: Opens a time picker and returns the selected time.

Flutter PopupMenuButton

Aadarsh Kunwar — Mon, 09 Sep 2024 14:30:46 +0000

In Flutter, PopupMenuButton is a widget that provides a menu for selecting among a set of options. When tapped, it displays a list of items in a pop-up that the user can choose from.

Here’s a basic example of how to use PopupMenuButton:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PopupMenuExample(),
    );
  }
}

class PopupMenuExample extends StatefulWidget {
  @override
  _PopupMenuExampleState createState() => _PopupMenuExampleState();
}

class _PopupMenuExampleState extends State<PopupMenuExample> {
  String _selectedOption = 'None';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Popup Menu Button Example'),
        actions: [
          PopupMenuButton<String>(
            onSelected: (String result) {
              setState(() {
                _selectedOption = result;
              });
            },
            itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
              const PopupMenuItem<String>(
                value: 'Option 1',
                child: Text('Option 1'),
              ),
              const PopupMenuItem<String>(
                value: 'Option 2',
                child: Text('Option 2'),
              ),
              const PopupMenuItem<String>(
                value: 'Option 3',
                child: Text('Option 3'),
              ),
            ],
          ),
        ],
      ),
      body: Center(
        child: Text('Selected option: $_selectedOption'),
      ),
    );
  }
}

Explanation:

PopupMenuButton: Creates a button that shows a pop-up menu.
onSelected: Callback that is invoked when an item from the menu is selected.
PopupMenuItem: Each item in the pop-up menu with a value and child (usually a Text widget).

Flutter DropdownButton

Aadarsh Kunwar — Fri, 06 Sep 2024 18:11:28 +0000

The DropdownButton widget in Flutter is a convenient way to create a dropdown menu that allows users to select from a list of options. It displays the currently selected item and provides a menu for selecting another item when tapped.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Dropdown Button Example')),
        body: Center(child: DropdownButtonExample()),
      ),
    );
  }
}

class DropdownButtonExample extends StatefulWidget {
  @override
  _DropdownButtonExampleState createState() => _DropdownButtonExampleState();
}

class _DropdownButtonExampleState extends State<DropdownButtonExample> {
  String? selectedValue;

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: selectedValue,
      hint: Text('Select an option'),
      items: <String>['Option 1', 'Option 2', 'Option 3']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
      onChanged: (String? newValue) {
        setState(() {
          selectedValue = newValue;
        });
      },
    );
  }
}

Key Properties of DropdownButton

value: The currently selected item. If it is null, the dropdown will show the hint.
hint: A widget that is displayed when no item is selected.
items: A list of DropdownMenuItem widgets that represent the options in the dropdown.
onChanged: A callback that is called when the user selects an item from the dropdown. It receives the new value as a parameter.

Flutter ListTile

Aadarsh Kunwar — Tue, 03 Sep 2024 16:48:38 +0000

The ListTile widget in Flutter is a versatile and commonly used widget that allows you to create a row containing a title, subtitle, leading, trailing, and an on-tap action. It's perfect for creating items in a list view, making it easy to add rich, complex lists to your apps.
Here’s a basic example of how to use ListTile:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter ListTile Example'),
        ),
        body: ListView(
          children: [
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('John Doe'),
              subtitle: Text('Software Engineer'),
              trailing: Icon(Icons.more_vert),
              onTap: () {
                // Action when tapped
                print('Tapped on John Doe');
              },
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('Jane Smith'),
              subtitle: Text('Product Manager'),
              trailing: Icon(Icons.more_vert),
              onTap: () {
                // Action when tapped
                print('Tapped on Jane Smith');
              },
            ),
          ],
        ),
      ),
    );
  }
}

Breakdown of ListTile properties:

leading: A widget to display before the title, typically an icon or an avatar.
title: The main text of the tile, often the name or primary information.
subtitle: Additional information under the title, usually a description or secondary text.
trailing: A widget to display after the title, often used for actions like buttons or icons.
onTap: A callback function that is called when the tile is tapped.

Aadarsh Kunwar

Aadarsh Kunwar — Mon, 02 Sep 2024 16:08:25 +0000