mobile application developement in flutter

1. Understanding stateless vs. stateful widgets

Flutter’s widget system boils down to two main types: stateless and stateful. Think of stateless widgets as photographs – once taken, they don’t change. Stateful widgets? They’re more like videos, constantly changing and updating.

Stateless widgets work perfectly for UI elements that don’t need to change after creation – things like icons, text labels, or buttons with fixed appearances. They’re lightweight and super efficient because Flutter doesn’t need to rebuild them unless their parent changes.

Stateful widgets shine when your UI needs to respond dynamically. User toggles a switch? That’s state change. Typing text? State change. These widgets maintain a separate “State” object that handles all those updates.

// Simple stateless widget
class GreetingText extends StatelessWidget {
  final String name;
  
  GreetingText(this.name);
  
  @override
  Widget build(BuildContext context) {
    return Text('Hello, $name!');
  }
}

// Stateful counter widget
class Counter extends StatefulWidget {
  @override
  _CounterState createState() =＞ _CounterState();
}

class _CounterState extends State＜Counter＞ {
  int count = 0;
  
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text('Count: $count'),
        IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            setState(() {
              count++;
            });
          },
        )
      ],
    );
  }
}

Material Design and Cupertino components

Flutter gives you two complete design systems right out of the box. Want your app to feel native on Android? Use Material Design components. Targeting iOS users? Grab the Cupertino widgets.

Material components follow Google’s design guidelines with features like elevation, ink splashes, and specific motion patterns. They include everything from basic buttons to complex components like BottomNavigationBar and TabBar.

Cupertino widgets mirror iOS design with components like CupertinoButton, CupertinoSwitch, and CupertinoNavigationBar. These have iOS-specific behaviors like bouncy scrolling and blurred backgrounds.

The real magic happens when you mix and match based on the platform your app is running on:

return Platform.isIOS
    ? CupertinoSwitch(value: isOn, onChanged: toggle)
    : Switch(value: isOn, onChanged: toggle);

Layout strategies for responsive designs

Building truly responsive Flutter apps means embracing constraints rather than fighting them. The framework uses a constraints-based layout system where parent widgets pass constraints down and children determine their size within those boundaries.

Row and Column widgets form the backbone of most layouts. They arrange children horizontally and vertically, respectively. Wrap them with Expanded or Flexible widgets to control how children divide available space.

For complex layouts, these patterns are lifesavers:

• Stack + Positioned: Layer widgets on top of each other

• LayoutBuilder: Access parent constraints directly

• MediaQuery: Respond to screen size, orientation, and more

• AspectRatio: Maintain specific width-to-height ratios

When screen sizes vary wildly, consider completely different layouts:

return LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth ＞ 600) {
      return WideLayout();
    } else {
      return NarrowLayout();
    }
  },
);

Custom widget creation for reusability

The secret to maintainable Flutter code? Custom widgets. Break your UI into smaller, reusable chunks and watch your codebase become more manageable.

Start by identifying repeating patterns in your UI. That card layout you use everywhere? Extract it. The styled text that appears throughout your app? Make it a widget.

Custom widgets bring massive benefits:

• They encapsulate complex UI logic

• They make testing easier

• They reduce duplication

• They improve readability

Here’s a practical example – instead of styling Text widgets everywhere:

// Before
Text(
  'Welcome',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.deepPurple,
  ),
)

// After creating a custom widget
class HeadingText extends StatelessWidget {
  final String text;
  HeadingText(this.text);
  
  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: TextStyle(
        fontSize: 24,
        fontWeight: FontWeight.bold,
        color: Colors.deepPurple,
      ),
    );
  }
}

// Using it is simple
HeadingText('Welcome')