website icon indicating copy to clipboard operation
website copied to clipboard

Document "How to create a widget with a custom RenderObject"

Open zoechi opened this issue 7 years ago • 2 comments

@sethladd commented on Mon Aug 01 2016

From a user:

A “creating a custom widget” section in basic Flutter layout documentation would be helpful, as the setup for a new Custom Widget requires a lot of knowledge up front:

  • Just the RenderBox performLayout() method has several important duties that aren’t reflected in its args or a return value
    • Loop through all the children via a linked list starting with “firstChild”
    • Execute each child RenderBox’s layout functions
    • Set the RenderBox’s size
    • Position each child RenderBox

Page to update: https://docs.flutter.dev/ui/layout


@Hixie commented on Tue Nov 14 2017

Some of this is documented now in the RenderBox and RenderObject API docs. Maybe we should add more to the RenderObjectWidget API docs too?


@xster commented on Fri Dec 22 2017

The RenderBox doc was pretty useful. Especially examples like with RenderOpacity. I think a page like https://flutter.io/tutorials/layout/ that walks through a hypothetical exercise with a flow-chart like structure would be nice too.

i.e. so you want to write your own RenderBox?

How many children? -> Common reusable utils -> One -> Many

Do you want to customize layout? -> Override X, details -> Override Y, details -> Example/exercise

Do you want to paint different? -> Override X, details -> Override Y, details -> Example/exercise


@goderbauer commented on Thu Dec 27 2018

@zoechi Should this be moved to the website repo? Most people I've talked to expect this to be a tutorial on the website. The API docs already have a lot of information on this, but most people want some kind of a codelab on this.

zoechi avatar Dec 27 '18 07:12 zoechi

Copied here for

kind of a codelab on this.

zoechi avatar Dec 27 '18 07:12 zoechi

Good idea. We could add it to the basic layout page/

sfshaza2 avatar Jan 28 '19 22:01 sfshaza2