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)),
));