Video Widgets and Tools

PageView

---

PageView

PageView widget is commonly used for building scrollable pages that snap to the screen's viewport size. The PageView widget provides an easy way to create swipeable pages (like in intro screens or tab views).

body: PageView(
  controller: _controller,
  children: <Widget>[
    Container(color: Colors.red, child: Center(child: Text('Page 1'))),
    Container(color: Colors.green, child: Center(child: Text('Page 2'))),
    Container(color: Colors.blue, child: Center(child: Text('Page 3'))),
  ],
),

PageView.builder

PageView.builder is a constructor for the PageView widget in Flutter, specifically designed for creating scrollable pages with a large (or infinite) number of children. Instead of requiring all children to be provided upfront, as with the default PageView constructor, PageView.builder only creates widgets when they're needed for viewing, making it more memory efficient.

PageView.builder(
  itemCount: 1000,
  itemBuilder: (BuildContext context, int index) {
    return Center(
      child: Text('Item $index'),
    );
  },
)

---

 

VisibilityDetector

---

VisibilityDetector is not a widget provided out-of-the-box by the Flutter framework. However, as of my last update in September 2021, there is a popular third-party package named visibility_detector which provides a VisibilityDetector widget. This widget is designed to detect changes to its visibility when it's partially or fully within the viewport.

VisibilityDetector(
  key: Key('unique key'),
  onVisibilityChanged: (VisibilityInfo info) {
    var visiblePercentage = info.visibleFraction * 100;
    print('Widget is $visiblePercentage% visible');
  },
  child: SomeWidget(),
)

---

 

IgnorePointer

---

IgnorePointer widget absorbs pointer events and prevents its children from receiving them. In simpler terms, it makes the widget and its children non-interactive. This is useful when you want to make a widget and its subtree temporarily non-responsive to touch or click events.

IgnorePointer(
  ignoring: true,
  child: RaisedButton(
    onPressed: () {
      print('Button pressed');
    },
    child: Text('Non-Interactive Button'),
  ),
)

---

 

Video Controller

---

AnimationController is a special type of Animation object in Flutter that can produce a new value whenever the underlying value changes. It provides methods to start, stop, reverse, and control the progression of animations over time.

import 'package:flutter/material.dart';

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

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

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..addListener(() {
        setState(() {}); // Trigger a rebuild whenever the animation value changes.
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimationController Example')),
      body: Center(
        child: FadeTransition(
          opacity: _controller,
          child: FlutterLogo(size: 100.0),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_controller.status == AnimationStatus.completed) {
            _controller.reverse();
          } else {
            _controller.forward();
          }
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }

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

---

 

Animated Builder

---

AnimatedBuilder widget is a utility widget designed to help build animations more efficiently. Instead of rebuilding your entire widget tree every time an animation changes, AnimatedBuilder can rebuild only the part of the widget tree that actually needs to be updated, which is more efficient.

AnimatedBuilder is especially useful when constructing more complex widgets that wish to include an animation as part of a larger build function.

import 'package:flutter/material.dart';

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

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

class RotationDemo extends StatefulWidget {
  @override
  _RotationDemoState createState() => _RotationDemoState();
}

class _RotationDemoState extends State<RotationDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 5),
      vsync: this,
    )..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedBuilder Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Transform.rotate(
              angle: _controller.value * 2.0 * 3.141592653589793, // Multiply by 2π for full rotation
              child: child,
            );
          },
          child: FlutterLogo(size: 100.0), // Child is passed to the builder but doesn't get rebuilt.
        ),
      ),
    );
  }

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

---

 

Circle Avatar

---

CircleAvatar widget is a simple and effective way to display circular images or icons, typically used in lists or user profile displays. It's a handy widget for representing user profiles, showing initials, or even just displaying an icon in a circular shape.

// with image
CircleAvatar(
  backgroundImage: NetworkImage('https://example.com/my-profile-image.jpg'),
  radius: 30.0,
)

// with initals
CircleAvatar(
  backgroundColor: Colors.blue,
  child: Text('AB'),
  radius: 30.0,
)

// with icon
CircleAvatar(
  backgroundColor: Colors.green,
  child: Icon(Icons.person),
  radius: 30.0,
)

---

 

Refresh Indicator

---

RefreshIndicator widget provides a visual indication, typically a spinning circle, to the user when the user has pulled down on the content to refresh the content. This is a common pattern found in many mobile apps, especially in lists or grids where content can be updated frequently.

The RefreshIndicator is usually used in combination with a scrollable widget, such as a ListView or ScrollView.

import 'package:flutter/material.dart';

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

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

class MyRefreshableList extends StatefulWidget {
  @override
  _MyRefreshableListState createState() => _MyRefreshableListState();
}

class _MyRefreshableListState extends State<MyRefreshableList> {
  List<String> items = ['Item 1', 'Item 2', 'Item 3'];

  Future<void> _refreshItems() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      items.add('New Item ${items.length + 1}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('RefreshIndicator Example')),
      body: RefreshIndicator(
        onRefresh: _refreshItems,
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) => ListTile(title: Text(items[index])),
        ),
      ),
    );
  }
}

---