How to vary the width of TextBox views using Rikulo Anchor Layout

Question

I am new to Dart and Rikulo.

class NameView extends Section
{
  View parentVu;

  // the inputs
  DropDownList titleDdl, suffixDdl; 
  TextBox firstNameTBox, middleNameTBox, lastNameTBox;

  // the labels
  TextView titleLbl, firstNameLbl, middleNameLbl, lastNameLbl, suffixLbl;

  List<String> titles = [ 'Dr', 'Hon', 'Miss', 'Mr', 'Mrs', 'Prof', 'Sir' ];
  List<String> suffixes = ['I', 'II', 'III', 'IV', 'Junior', 'Senior'];

  NameView()
  {
     parentVu = new View()
     ..style.background = 'cyan'
     ..addToDocument();

     titleLbl = new TextView( 'Title' );
     parentVu.addChild( titleLbl );

     titleDdl = new DropDownList( model : new DefaultListModel( titles ) )
       ..profile.anchorView = titleLbl
       ..profile.location = 'east center';
     parentVu.addChild( titleDdl );

     firstNameLbl = new TextView( 'First' )
       ..profile.anchorView = titleDdl
       ..profile.location = 'east center';
     parentVu.addChild(firstNameLbl );

     firstNameTBox = new TextBox( null, 'text' )
      ..profile.anchorView = firstNameLbl
      ..profile.location = 'east center';
      //..profile.width = 'flex';
     parentVu.addChild( firstNameTBox );
}

The program renders. However, it does not uses the entire width of the browser (FireFox). I have tried for the TextBoxes profile.width = 'flex'

but it does not work.

Any help is appreciated.

Answer 1

Firefox? Did you test it with Dartium? Notice that you have to compile it to JS before you can test it with browsers other than Dartium.

BTW, from your implementation, NameView seems not related to parentVu at all. If it is just a controller, it needs not to extend from Section (i.e., it doesn't have to be a view).

Answer 2

If a view is anchored to another, both location and size will depend on the view it anchors. In your case, if specifying flex to TextBox, its width will be the same as FirstNameLb1. It is why it is so small.

You can listen to the layout event such as:

 firstNameTBox.on.layout.listen((_) {
    firstNameTBox.width = parentVu.width;
 });

Note: You need to do some calculation to get the right width.

See also Layout Overview