Tutorial sample does not work under Linux

Issue by jimbeveridge
Tuesday Oct 13, 2015 at 20:05 GMT
Originally opened as https://github.com/flutter/engine/issues/1597

I realize that Linux/Mojo isn't officially supported, but I was concerned that this was indicative of a more general problem.

I'm running the sample code in the tutorial. If I take out the Center widget, it works. If I put in the center widget, it just shows a black screen. See the comments below in DemoHome.build().

import 'package:flutter/material.dart';

class MyToolBar extends StatelessComponent {
  Widget build(BuildContext context) {
    return new Container(
        height: 56.0,
        padding: const EdgeDims.symmetric(horizontal: 8.0),
        child: new Material(
            child: new Row([
          new NetworkImage(src: 'menu.png', width: 25.0, height: 25.0),
          new Flexible(child: new Text('My awesome toolbar')),
          new NetworkImage(src: 'search.png', width: 25.0, height: 25.0),
        ])));
  }
}

class DemoHome extends StatelessComponent {
  Widget build(BuildContext context) {
    // This line just gives a black screen on Linux.
    return new Center(child: new MyToolBar());
    // This line works on Linux.
    return new MyToolBar();
  }
}

void main() {
  runApp(new MaterialApp(
      title: 'Tutorial app',
      routes: {'/': (RouteArguments args) => new DemoHome()}));
}

Comment by jamesr
Tuesday Oct 13, 2015 at 20:22 GMT

Does it work on Android/Mojo?

Comment by jimbeveridge
Tuesday Oct 13, 2015 at 20:24 GMT

Yes, it works on Android.

Comment by abarth
Wednesday Oct 14, 2015 at 00:10 GMT

Crazy. I'm going to rework this tutorial soon to use the material widgets so you get something beautiful in the end.

Comment by Hixie
Thursday Oct 15, 2015 at 05:07 GMT

Can you attach the output of debugDumpApp() and debugDumpRenderTree() as it appears one second after rendering? (i.e. create a one-second timer, then call those functions from there)

You'll need to import flutter/rendering.dart for debugDumpRenderTree().

Comment by jimbeveridge
Thursday Oct 15, 2015 at 16:28 GMT

I'm not allowed to upload a .txt file, so here it is inline:

RenderObjectToWidgetAdapter<RenderBox>(renderObject: RenderView)
 └MaterialApp(state: _MaterialAppState(336939200; [email protected]))
   └Theme()
     └DefaultTextStyle(color: Color(0xd0ff0000); fontFamily: "monospace"; fontSize: 48.0; fontWeight: FontWeight.w900; textAlign: TextAlign.right; decoration: [TextDecoration.underline]; decorationColor: Color(0x00ffff00); decorationStyle: TextDecorationStyle.double)
       └Title()
         └Navigator(state: NavigatorState(872665345; [email protected]))
           └Focus(state: FocusState(80693997; [email protected]))
             └_FocusScope()
               └Stack(renderObject: RenderStack)
                 └KeyedSubtree()
                   └SlideTransition(state: _TransitionState(24114625; [email protected]))
                     └Transform(renderObject: RenderTransform)
                       └FadeTransition(state: _TransitionState(834711434; [email protected]))
                         └Opacity(renderObject: RenderOpacity)
                           └HelloWorldApp()
                             └Center(renderObject: RenderPositionedBox)
                               └MyToolBar()
                                 └GestureDetector(state: _GestureDetectorState(23330005; [email protected]))
                                   └Listener(renderObject: RenderPointerListener relayoutSubtreeRoot=up1)
                                     └Container()
                                       └SizedBox(renderObject: RenderConstrainedBox relayoutSubtreeRoot=up2)
                                         └DecoratedBox(renderObject: RenderDecoratedBox relayoutSubtreeRoot=up3)
                                           └Padding(renderObject: RenderPadding relayoutSubtreeRoot=up4)
                                             └Material()
                                               └DefaultTextStyle(color: Color(0xdd000000); fontSize: 14.0; fontWeight: FontWeight.w400; textBaseline: TextBaseline.alphabetic)
                                                 └AnimatedContainer(state: _AnimatedContainerState(555470215; [email protected]))
                                                   └Container()
                                                     └DecoratedBox(renderObject: RenderDecoratedBox relayoutSubtreeRoot=up5)
                                                       └DefaultTextStyle(color: Color(0xdd000000); fontSize: 14.0; fontWeight: FontWeight.w400; textBaseline: TextBaseline.alphabetic)
                                                         └Row(renderObject: RenderFlex relayoutSubtreeRoot=up6)
                                                           ├MyButton()
                                                           │ └GestureDetector(state: _GestureDetectorState(745193464; [email protected]))
                                                           │   └Listener(renderObject: RenderPointerListener relayoutSubtreeRoot=up7)
                                                           │     └Container()
                                                           │       └Padding(renderObject: RenderPadding relayoutSubtreeRoot=up8)
                                                           │         └SizedBox(renderObject: RenderConstrainedBox relayoutSubtreeRoot=up9)
                                                           │           └DecoratedBox(renderObject: RenderDecoratedBox relayoutSubtreeRoot=up10)
                                                           │             └Padding(renderObject: RenderPadding relayoutSubtreeRoot=up11)
                                                           │               └Center(renderObject: RenderPositionedBox relayoutSubtreeRoot=up12)
                                                           │                 └Text("Engagand"e")
                                                           │                   └Paragraph(renderObject: RenderParagraph relayoutSubtreeRoot=up13)
                                                           ├Container()
                                                           │ └Padding(renderObject: RenderPadding relayoutSubtreeRoot=up7)
                                                           │   └NetworkImage()
                                                           │     └ImageListener(state: _ImageListenerState(487563986; [email protected]))
                                                           │       └Image(renderObject: RenderImage relayoutSubtreeRoot=up8)
                                                           ├Flexible()
                                                           │ └Text("My awesome toolbar")
                                                           │   └Paragraph(renderObject: RenderParagraph relayoutSubtreeRoot=up7)
                                                           └NetworkImage()
                                                             └ImageListener(state: _ImageListenerState(489436571; [email protected]))
                                                               └Image(renderObject: RenderImage relayoutSubtreeRoot=up7)
RenderView
  parentData: null
  constraints: null
  child: RenderStack
    parentData: <none>
    constraints: BoxConstraints(320.0<=w<=320.0, 640.0<=h<=640.0)
    size: Size(320.0, 640.0)
    child 1: RenderTransform
      parentData: position=Point(0.0, 0.0); top=null; right=null; bottom=null, left=null
      constraints: BoxConstraints(320.0<=w<=320.0, 640.0<=h<=640.0)
      size: Size(320.0, 640.0)
      transform matrix:
        [0] 1.0,0.0,0.0,0.0
        [1] 0.0,1.0,0.0,0.0
        [2] 0.0,0.0,1.0,0.0
        [3] 0.0,0.0,0.0,1.0

      origin: null
      child: RenderOpacity
        parentData: position=Point(0.0, 0.0)
        constraints: BoxConstraints(320.0<=w<=320.0, 640.0<=h<=640.0)
        size: Size(320.0, 640.0)
        child: RenderPositionedBox
          parentData: position=Point(0.0, 0.0)
          constraints: BoxConstraints(320.0<=w<=320.0, 640.0<=h<=640.0)
          size: Size(320.0, 640.0)
          horizontal: 0.5
          vertical: 0.5
          child: RenderPointerListener relayoutSubtreeRoot=up1
            parentData: position=Point(0.0, 292.0)
            constraints: BoxConstraints(0.0<=w<=320.0, 0.0<=h<=640.0)
            size: Size(320.0, 56.0)
            child: RenderConstrainedBox relayoutSubtreeRoot=up2
              parentData: position=Point(0.0, 0.0)
              constraints: BoxConstraints(0.0<=w<=320.0, 0.0<=h<=640.0)
              size: Size(320.0, 56.0)
              additionalConstraints: BoxConstraints(0.0<=w<=Infinity, 56.0<=h<=56.0)
              child: RenderDecoratedBox relayoutSubtreeRoot=up3
                parentData: position=Point(0.0, 0.0)
                constraints: BoxConstraints(0.0<=w<=320.0, 56.0<=h<=56.0)
                size: Size(320.0, 56.0)
                decoration:
                  backgroundColor: Color(0x000fffff)
                child: RenderPadding relayoutSubtreeRoot=up4
                  parentData: position=Point(0.0, 0.0)
                  constraints: BoxConstraints(0.0<=w<=320.0, 56.0<=h<=56.0)
                  size: Size(320.0, 56.0)
                  padding: EdgeDims(0.0, 8.0, 0.0, 8.0)
                  child: RenderDecoratedBox relayoutSubtreeRoot=up5
                    parentData: position=Point(8.0, 0.0)
                    constraints: BoxConstraints(0.0<=w<=304.0, 56.0<=h<=56.0)
                    size: Size(304.0, 56.0)
                    decoration:
                      backgroundColor: Color(0xfffafafa)
                    child: RenderFlex relayoutSubtreeRoot=up6
                      parentData: position=Point(0.0, 0.0)
                      constraints: BoxConstraints(0.0<=w<=304.0, 56.0<=h<=56.0)
                      size: Size(304.0, 56.0)
                      direction: FlexDirection.horizontal
                      justifyContent: FlexJustifyContent.start
                      alignItems: FlexAlignItems.center
                      textBaseline: null
                      child 1: RenderPointerListener relayoutSubtreeRoot=up7
                        parentData: position=Point(0.0, 0.0); flex=null
                        constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=56.0)
                        size: Size(118.0, 56.0)
                        child: RenderPadding relayoutSubtreeRoot=up8
                          parentData: position=Point(0.0, 0.0)
                          constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=56.0)
                          size: Size(118.0, 56.0)
                          padding: EdgeDims(0.0, 8.0, 0.0, 8.0)
                          child: RenderConstrainedBox relayoutSubtreeRoot=up9
                            parentData: position=Point(8.0, 0.0)
                            constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=56.0)
                            size: Size(102.0, 56.0)
                            additionalConstraints: BoxConstraints(0.0<=w<=Infinity, 56.0<=h<=56.0)
                            child: RenderDecoratedBox relayoutSubtreeRoot=up10
                              parentData: position=Point(0.0, 0.0)
                              constraints: BoxConstraints(0.0<=w<=Infinity, 56.0<=h<=56.0)
                              size: Size(102.0, 56.0)
                              decoration:
                                borderRadius: 5.0
                                gradient: LinearGradient(Point(0.0, 0.0), Point(0.0, 36.0), [Color(0xffeeeeee), Color(0xff444444)], null, TileMode.clamp)
                              child: RenderPadding relayoutSubtreeRoot=up11
                                parentData: position=Point(0.0, 0.0)
                                constraints: BoxConstraints(0.0<=w<=Infinity, 56.0<=h<=56.0)
                                size: Size(102.0, 56.0)
                                padding: EdgeDims(8.0, 8.0, 8.0, 8.0)
                                child: RenderPositionedBox relayoutSubtreeRoot=up12
                                  parentData: position=Point(8.0, 8.0)
                                  constraints: BoxConstraints(0.0<=w<=Infinity, 40.0<=h<=40.0)
                                  size: Size(86.0, 40.0)
                                  horizontal: 0.5
                                  vertical: 0.5
                                  child: RenderParagraph relayoutSubtreeRoot=up13
                                    parentData: position=Point(0.0, 10.0)
                                    constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=40.0)
                                    size: Size(86.0, 20.0)
                                    text:
                                      StyledTextSpan:
                                        color: Color(0xdd000000)
                                        fontSize: 14.0
                                        fontWeight: FontWeight.w400
                                        textBaseline: TextBaseline.alphabetic
                                        PlainTextSpan: "Engagand"e"
                      child 2: RenderPadding relayoutSubtreeRoot=up7
                        parentData: position=Point(118.0, 13.0); flex=null
                        constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=56.0)
                        size: Size(46.0, 30.0)
                        padding: EdgeDims(0.0, 8.0, 0.0, 8.0)
                        child: RenderImage relayoutSubtreeRoot=up8
                          parentData: position=Point(8.0, 0.0)
                          constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=56.0)
                          size: Size(30.0, 30.0)
                          width: 30.0
                          height: 30.0
                      child 3: RenderParagraph relayoutSubtreeRoot=up7
                        parentData: position=Point(164.0, 8.0); flex=1
                        constraints: BoxConstraints(115.0<=w<=115.0, 0.0<=h<=56.0)
                        size: Size(115.0, 40.0)
                        text:
                          StyledTextSpan:
                            color: Color(0xdd000000)
                            fontSize: 14.0
                            fontWeight: FontWeight.w400
                            textBaseline: TextBaseline.alphabetic
                            PlainTextSpan: "My awesome toolbar"
                      child 4: RenderImage relayoutSubtreeRoot=up7
                        parentData: position=Point(279.0, 15.5); flex=null
                        constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=56.0)
                        size: Size(25.0, 25.0)
                        width: 25.0
                        height: 25.0

Comment by Hixie
Thursday Oct 15, 2015 at 16:52 GMT

That all looks fine... How tall is your window? Are you sure you're seeing the whole 320.0x640.0 canvas?

Does anything render if you set debugPaintSizeEnabled to true at the top of your main()?

Comment by Hixie
Thursday Oct 15, 2015 at 16:59 GMT

You may have to use checked mode to use debugPaintSizeEnabled.

Actually, in general I highly recommend using checked mode. See if you're hitting any asserts.

Comment by jimbeveridge
Thursday Oct 15, 2015 at 18:02 GMT

If I set debugPaintSizeEnabled, then everything works.

One small (unrelated) issue - in box_painter.dart, line 310, this line asserts:

assert(colors.length == stops.length);

However, I don't pass in stops, so stops is null and the assert itself is the problem.

If I comment out that assert, then it runs cleanly.

@chinmaygarde

Comment by Hixie
Thursday Oct 15, 2015 at 18:20 GMT

Please file a separate bug for that assert. Thanks.

If merely setting debugPaintSizeEnabled makes things work, this is probably a Skia-level bug. @chinmaygarde may have ideas. If it's Linux-specific, though, I don't think we want to spend too many cycles looking at this.

Comment by chinmaygarde
Thursday Oct 15, 2015 at 20:32 GMT

We would need to capture an SkPicture trace. Unfortunately, the tracing controller on Linux does not know where to place these traces (its a platform specific path). I can try to figure out whats going on after I am done with the precompiled snapshotting stuff.

If in a hurry, the platform needs to set TracingController::set_picture_tracing_base_path on shell initialization. Then traces can be captured from Dart via the StatisticsOverlay (https://github.com/flutter/engine/blob/master/sky/packages/sky/lib/src/widgets/statistics_overlay.dart#L84). Or you can override this flag in C++ to always capture traces :) https://github.com/flutter/engine/blob/fb6143da0f2bcfbe0879b12b7ea777955e51fdc3/sky/shell/gpu/rasterizer.cc#L84

This problem no longer happens. Closing issue.

Add demangle workaround for dynamic_release (flutter#198)

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Tutorial sample does not work under Linux #198

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Tutorial sample does not work under Linux #198

Description

Activity

FlutterIssues commented on Nov 9, 2015

FlutterIssues commented on Nov 9, 2015

FlutterIssues commented on Nov 9, 2015

FlutterIssues commented on Nov 9, 2015

FlutterIssues commented on Nov 9, 2015

FlutterIssues commented on Nov 9, 2015

FlutterIssues commented on Nov 9, 2015

FlutterIssues commented on Nov 9, 2015

FlutterIssues commented on Nov 9, 2015

FlutterIssues commented on Nov 9, 2015

jimbeveridge commented on Nov 12, 2015

github-actions commented on Sep 7, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions