🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Flutter

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

Q&A

1回答

3071閲覧

[Flutter]ボタンを押すと指定の場所まで画面スクロール を作りたい。

Nave

総合スコア4

Flutter

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

0グッド

0クリップ

投稿2021/02/05 16:03

前提・実現したいこと

ボタンを押すと指定の場所まで画面スクロールをしたいです。

ただいま登録フォーム画面を作成していて、送信ボタンを押した際にバリデーションフォーマットと違う記述があった場合にエラーメッセージを表示します。それと同時のボタンを押したタイミングで、その間違いの箇所にスクロールして欲しいです。

ScrollControllerを使うのだろうとは思うのですが、実際の具体的な使い方が乗っていなかったので教えて欲しいです。

サンプルソースコード

このサンプルでいうと、一番下のボタンを押すと、赤色のコンテナか青色のコンテナに自動でスクロールするようにしたいです。

Sample

1import 'package:flutter/material.dart'; 2 3void main() => runApp(MyApp()); 4 5class MyApp extends StatelessWidget { 6 int where; 7 @override 8 Widget build(BuildContext context) { 9 return new MaterialApp( 10 home: Container( 11 color: Colors.white, 12 child: SingleChildScrollView( 13 child: Column( 14 children: <Widget>[ 15 Container(height: 100,color: Colors.amber), 16 Container(height: 100,color: Colors.cyanAccent), 17 Container(height: 100,color: Colors.blue), 18 Container(height: 100,color: Colors.cyanAccent), 19 Container(height: 100,color: Colors.amber), 20 Container(height: 100,color: Colors.cyanAccent), 21 Container(height: 100,color: Colors.amber), 22 Container(height: 100,color: Colors.cyanAccent), 23 Container(height: 100,color: Colors.red), 24 Container(height: 100,color: Colors.cyanAccent), 25 Container(height: 100,color: Colors.amber), 26 Container(height: 100,color: Colors.cyanAccent), 27 Container(height: 100,color: Colors.amber), 28 Container(height: 100,color: Colors.cyanAccent), 29 Container(height: 100,color: Colors.amber), 30 Container(height: 100,color: Colors.cyanAccent), 31 Container(height: 100,color: Colors.amber), 32 Container(height: 100,color: Colors.cyanAccent), 33 Container(height: 100,color: Colors.amber), 34 Container(height: 100,color: Colors.cyanAccent), 35 Container(height: 100,color: Colors.amber), 36 Container(height: 100,color: Colors.cyanAccent), 37 Container(height: 100,color: Colors.amber), 38 Container(height: 100,color: Colors.cyanAccent), 39 Container( 40 child:FlatButton( 41 height:100, 42 child:Text("送信"), 43 onPressed:(){ 44 switch(where){ 45 case 1: 46 //青色に遷移 47 break; 48 case 2: 49 //赤色に遷移 50 break; 51 default: 52 //遷移なし 53 } 54 } 55 ) 56 ) 57 ], 58 ), 59 ) 60 ) 61 ); 62 } 63} 64 65

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

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

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

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

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

guest

回答1

0

そういうのGoogleが作っていたなぁと思い出しました。
https://pub.dev/packages/scrollable_positioned_list

投稿2021/02/08 18:27

編集2021/02/08 18:28
hiroshihorie

総合スコア192

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

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

Nave

2021/02/19 22:58

回答ありがとうございます! ただ、これを使って解決しそうなのはわかるのですが、サンプルコードが難しくてどのように使うか分からないです???? 簡単でいいのでどの様に使うか、例みたいなのあると嬉しいです????
Nave

2021/02/19 23:37

ネットに上がっているものはほとんどitemBuilderなどで自動で作成されたContainerなどにindexを割り振っているのですが、質問文のソースコードのように直書きしているものに、それぞれindexも直で書いてわりふりたいです。
hiroshihorie

2021/02/25 01:05 編集

indexはリスト内の0から始まる位置なので、itemBuilderを使わない場合でも存在しています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問