banner
RustyNail

RustyNail

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

flutterのrowとcol

flutter の col と row は、bootstrap とほぼ同じように使用されます。

直接new Row(childen:..);を使用するだけで、
中に何を入れても構いません...

注意しなければならないのは、中にあまりにも多くの要素を入れて、listview で囲まない場合、画面からはみ出してエラーが発生することです。

デモコード

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: 'メニュー',
              onPressed: null,
            ),
            new Expanded(
              child: new Text('タイトル'),
            ),
            new IconButton(
              icon: new Icon(Icons.search),
              tooltip: '検索',
              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('テスト'),
                    )
                  ),
                  new Expanded(
                    child: new Container(
                      height: 50.0,
                      color: Colors.blue,
                      child: new Text('テスト'),
                    )
                  ),
                  new Expanded(
                    child: new Container(
                      height: 50.0,
                      color: Colors.teal,
                      child: new Text('テスト'),
                    )
                  ),
                ],
              ),
              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: 'タイトル',
  home: new HomePage(color:const Color.fromRGBO(138,43,226, 1.0)),
));
読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。