Skip to main content

Designing Custom Widgets

Example:​

declaring widget with properties​

First, let’s create our own widget, containing all needed properties to display such an element.

class BlogOverview extends StatelessWidget {
  final Widget image;
  final String title;
  final String text;
  final bool reversed;

  BlogOverview({this.title, this.text, this.image, this.reversed = false});

Widget integration in a listview​

Our created widget will adapt itself with the available space. So designing an entire screen is as usual.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Flutter OverflowBar Demo'),
    ),
    body: ListView.separated(
      itemCount: 20,
      itemBuilder: (context, index) => _buildBlog(index),
      separatorBuilder: (context, index) => Divider(height: 80.0,),
      padding: EdgeInsets.symmetric(horizontal: 12.0),
    ),
  );
}

Widget _buildBlog(int index) {
  return Container(
    alignment: Alignment.center,
    padding: EdgeInsets.all(10.0),
    child: BlogOverview(
      title: 'Blog Nature #${index+1}',
      text: ...,
      image: ...,
      reversed: index.isOdd,
    ),
  );
}