質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

1回答

1519閲覧

FLutterにて斜めスクロールの実装の仕方が分からない

jam912sh

総合スコア25

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2020/04/08 13:25

編集2020/04/09 07:38

FLutter初心者なのですが、スクリーンの横スクロール、縦スクロール
はできるのですが、斜めにスクロールするにはどうすればいいのでしょうか?
お詳しい方、是非ともご教示頂けますと幸いで御座います。

■main.dart

Dart

1import 'package:flutter/material.dart'; 2 3void main() { 4 runApp(new MaterialApp( 5 home: new MyHomePage(), 6 )); 7} 8 9class MyHomePage extends StatelessWidget { 10 Widget build(BuildContext context) { 11 ThemeData themeData = Theme.of(context); 12 return new Scaffold( 13 body: new SingleChildScrollView( 14 //スクロールの設定 15 scrollDirection: Axis.horizontal, 16 child: new SizedBox( 17 //画面の幅 18 width: 1000.0, 19 child: new ListView.builder( 20 itemBuilder: (BuildContext context, int x) { 21 return new Row( 22 mainAxisAlignment: MainAxisAlignment.spaceEvenly, 23 children: new List.generate(5, (int y) { 24 return new Text("$x,$y", style: themeData.textTheme.display2); 25 }), 26 ); 27 }, 28 ), 29 ), 30 ), 31 ); 32 } 33}

調査してみた事

似たような質問をされている方がいらっしゃいましたが、
そちらの解決方法がいまいち理解できませんでした。
https://stackoverflow.com/questions/53833003/multidirectional-scroll-in-flutter

補足情報(FW/ツールのバージョンなど)

android studio 3.6.1
flutter 1.12.13+hotfix.8
Dart 2.7.0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

パッケージを使用して無事、自己解決致しました。

■使用したパッケージは以下です。
https://pub.dev/packages/bidirectional_scroll_view#-installing-tab-

■コードは以下です。

Dart

1 2import 'package:bidirectional_scroll_view/bidirectional_scroll_view.dart'; 3import 'package:flutter/material.dart'; 4 5void main() { 6 runApp(new MyApp()); 7} 8 9//動的コンテンツの設定 10class MyApp extends StatefulWidget { 11 12 _MyAppState createState() => new _MyAppState(); 13} 14 15class _MyAppState extends State<MyApp> { 16 //「BidirectionalScrollViewPlugin」のプロパティ「plugin」 17 BidirectionalScrollViewPlugin _plugin; 18 19 20 void initState() { 21 //アプリ起動時1回だけ呼び出される「initState」 22 super.initState(); 23 _plugin = new BidirectionalScrollViewPlugin( 24 child: _buildWidgets(), //ここで「_buildWidgets()」が呼び出される 25 velocityFactor: 2.0, 26 scrollListener: (offset) { 27 print("----------"); 28 print("new x and y scroll offset: " + 29 offset.dx.toString() + 30 " " + 31 offset.dy.toString()); 32 print("x and y scroll offset getters: " + 33 _plugin.x.toString() + 34 " " + 35 _plugin.y.toString()); 36 print("height and width of overscrolled widget: " + 37 _plugin.height.toString() + 38 " " + 39 _plugin.width.toString()); 40 print("height and width of the container: " + 41 _plugin.containerHeight.toString() + 42 " " + 43 _plugin.containerWidth.toString()); 44 print("----------"); 45 }, 46 ); 47 48 //_plugin.offset = new Offset(10.0, 10.0); // use this method to set a new offset where appropriate 49 } 50 51 52 Widget build(BuildContext context) { 53 //「initState」の次にこちらが呼び出される 54 //マテリアルデザインを使用 55 return new MaterialApp( 56 home: new Scaffold( 57 appBar: new AppBar( 58 title: new Text('Bidirectional ScrollView Plugin'), 59 ), 60 body: new Center(child: _plugin //ボディの中身は「_plugin」が呼び出される 61 ), 62 ), 63 ); 64 } 65 66 Widget _buildWidgets() { 67 //何故か「ConstrainedBox」に入れないとリストが表示されない 68 return ConstrainedBox( 69 constraints: BoxConstraints.expand(height: 1000.0, width: 1000.0), 70 child:new ListView.builder( 71 itemBuilder: (BuildContext context, int x) { 72 return new Row( 73 mainAxisAlignment: MainAxisAlignment.spaceEvenly, 74 children: new List.generate(5, (int y) { 75 return new Text("$x,$y", style: Theme.of(context).textTheme.display2); 76 }), 77 ); 78 }, 79 ), 80 ); 81 } 82} 83 84 85

投稿2020/04/12 02:27

jam912sh

総合スコア25

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問