banner
RustyNail

RustyNail

coder. 【blog】https://rustynail.me 【nostr】wss://ts.relays.world/ wss://relays.world/nostr

row and col in flutter

The "col" and "row" in Flutter are similar to Bootstrap.
You can simply use new Row(children:..); and put whatever you want inside it.
One thing to note is that if you put too many things inside without using a ListView, it will cause an error due to screen overflow.

Demo code:

import 'package:flutter/material.dart';

class AppBar extends StatelessWidget{
  @override
    Widget build(BuildContext context) {
      // TODO: implement build
      return new Container(
        // margin: const EdgeInsets.fromLTRB(0.0, 24.0, 0.0, 0.0),
        color: Colors.purple.shade300,
        child: new Row(
          children: <Widget>[
            new IconButton(
              icon: new Icon(Icons.menu),
              tooltip: 'menu',
              onPressed: null,
            ),
            new Expanded(
              child: new Text('Title'),
            ),
            new IconButton(
              icon: new Icon(Icons.search),
              tooltip: 'search',
              onPressed: null,
            )
          ],
        ),
      );
    }
}

class PageContent extends StatelessWidget{
  const PageContent({this.color});
  final Color color;
    @override
      Widget build(BuildContext context) {
        // 
        return new Material(
          child: new Column(
            children: <Widget>[
              new Row(
                children: <Widget>[
                  new Expanded(
                    child: new Container(
                      height: 50.0,
                      color: Colors.orange,
                      child: new Text('test'),
                    )
                  ),
                  new Expanded(
                    child: new Container(
                      height: 50.0,
                      color: Colors.blue,
                      child: new Text('test'),
                    )
                  ),
                  new Expanded(
                    child: new Container(
                      height: 50.0,
                      color: Colors.teal,
                      child: new Text('test'),
                    )
                  ),
                ],
              ),
              new Image.network('https://i0.hdslb.com/bfs/archive/36f639d8cedc57840aff48361a7a1e8389040077.jpg'),
                new Image.network('https://i0.hdslb.com/bfs/archive/36f639d8cedc57840aff48361a7a1e8389040077.jpg'),
                new Container(
                  margin: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
                  child: new Text('VioletEverGarden',
                    style: new TextStyle(
                      color: color,
                      fontSize: 36.0
                  )
                ),
              )
            ],
          )
        );
      }
}


class HomePage extends StatelessWidget{
  const HomePage({this.color});
  final Color color;
  @override
    Widget build(BuildContext context) {
      // TODO: implement build
      return new Material(
        child: new Column(
          children: <Widget>[
            new Container(
              color: this.color,
              height: 24.0,
            ),
            new AppBar(),
            new PageContent(color: color,)
          ],
        ),
      );
    }
}
void main()=>runApp(new MaterialApp(
  title: 'title',
  home: new HomePage(color:const Color.fromRGBO(138,43,226, 1.0)),
));
Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.