Skip to content

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

Closed

Description

@zoechi

@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.

Activity

  1. zoechi commented on Dec 27, 2018

    @zoechi
    Author

    Copied here for

    kind of a codelab on this.

  2. sfshaza2 commented on Jan 28, 2019

    @sfshaza2
    Contributor

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

  3. added
    e2-daysEffort: < 5 days
    p1-highMajor but not urgent concern: Resolve in months. Update each month.
    on Jan 28, 2019
  4. added
    t.ui.generalRelates to general Flutter app UI topics
    t.ui.layoutRelates to layout of UI components
    t.ui.renderingRelates to rendering UI components
    p3-lowValid but not urgent concern. Resolve when possible. Encourage upvote to surface.
    e3-weeksEffort: < 4 weeks
    and removed
    p1-highMajor but not urgent concern: Resolve in months. Update each month.
    e2-daysEffort: < 5 days
    on May 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    closed (obsolete)Too old or too vaguee3-weeksEffort: < 4 weeksp3-lowValid but not urgent concern. Resolve when possible. Encourage upvote to surface.t.ui.generalRelates to general Flutter app UI topicst.ui.layoutRelates to layout of UI componentst.ui.renderingRelates to rendering UI components

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions