MENU
  • About
  • Service
    • ホームページ製作
    • ノーコードアプリ開発
    • 業務自動化・効率化
    • Google Workspace
    • プログラミング学習サポート
    • セミナー講師
  • News
  • Blog
  • Contact
芝池製作所
  • About
  • Service
    • ホームページ製作
    • ノーコードアプリ開発
    • 業務自動化・効率化
    • Google Workspace
    • プログラミング学習サポート
    • セミナー講師
  • News
  • Blog
  • Contact
芝池製作所
  • About
  • Service
    • ホームページ製作
    • ノーコードアプリ開発
    • 業務自動化・効率化
    • Google Workspace
    • プログラミング学習サポート
    • セミナー講師
  • News
  • Blog
  • Contact
  1. ホーム
  2. Blog
  3. Flutter Wrap ではみ出したところを折り返して表示!!

Flutter Wrap ではみ出したところを折り返して表示!!

2023 7/26
Blog Flutter / Dart
2020年2月27日2023年7月26日
目次

完成のコード

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: Center(
            child: Wrap(
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  width: 200,
                  height: 100,
                ),
                Container(
                  color: Colors.brown,
                  width: 200,
                  height: 100,
                ),
                Container(
                  color: Colors.grey,
                  width: 200,
                  height: 100,
                ),
              ],Ï
            ),
          ),
        ),
      ),
    );
  }
}

Container()を3つRow()で表示するだけだと

表示領域を超えるとerrorが出てしまい、正常に表示されません。

そこで、Row()の代わりにWrap()で囲ってあげます。
そうすると、完成コードのように自動で折り返し表示してくれます。

その他の引数

spacing

要素同士の間のスペースを調整

child: Wrap(
              spacing: 8.0,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  width: 200,
                  height: 100,
                ),
                Container(
                  color: Colors.brown,
                  width: 200,
                  height: 100,
                ),
                Container(
                  color: Colors.grey,
                  width: 200,
                  height: 100,
                ),
              ],
            ),

verticalDirection: VerticalDirection.up

折り返した際、前後表示の順番
upなら最後の要素を先頭に表示。

あとはまとめてこんな感じ


上の画像のコード
Wrap()の引数のコメントをみてもらいつつ、実際に動かしてもらうとわかりやすいと思います!!

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: Center(
            child: Wrap(
              verticalDirection: VerticalDirection.up, //折り返した際、前後表示の順番
              runSpacing: 60.0, // 折り返した要素と元の要素との距離感
              alignment: WrapAlignment.end, // 折り返した要素の配置位置を決める
              // direction: Axis.vertical, // 垂直方向に配置
              spacing: 8.0, // 要素間のスペース
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  width: 200,
                  height: 100,
                ),
                Container(
                  color: Colors.brown,
                  width: 200,
                  height: 100,
                ),
                Container(
                  color: Colors.grey,
                  width: 200,
                  height: 100,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
Blog Flutter / Dart

この記事が気に入ったら
いいね または フォローしてね!

Follow Me
よかったらシェアしてね!
  • URLをコピーしました!
  • Flutter Expanded で幅をいい感じに調整!!
  • Flutter AnimatedContainer で要素に動きを与える!!

関連記事

  • AppSheetでMapにピンを立てる
    2023年9月9日
  • AppSheetで画像を表示
    2023年9月8日
  • Googleフォームで経費管理
    2023年9月6日
  • GAS(プログラム)で請求書が添付されたGmailを取得
    2023年9月3日
  • ホームページ製作 WordPressとノーコードの選択
    2023年8月14日
  • Google Workspaceで生産性向上?
    2023年8月14日
  • 生産性向上!なぜ「チャット」が業務効率化のカギなのか
    2023年8月13日
  • ホームページ デザインのトレンド
    2023年8月11日
Category
  • Anaconda
  • AppSheet
  • Blog
  • colaboratory
  • Flutter / Dart
  • Git
  • Google Workspace
  • GoogleAppsScript
  • HomePage
  • JavaScript
  • Laravel
  • News
  • Python
  • Selenium
  • SQL
  • TypeScript
  • wordpress
  • スプレッドシート
  • データベース
  • ノーコード
  • プログラミング
  • 生産性向上
Navigation
  • About
  • Service
    • ホームページ製作
    • ノーコードアプリ開発
    • 業務自動化・効率化
    • Google Workspace
    • プログラミング学習サポート
    • セミナー講師
  • News
  • Blog
  • Contact

© 芝池製作所.

目次