Flutter SingleChildScrollViewの高さを変えるサンプル

環境
Windows11 pro 64bit
Flutter 3.3.7

構文
Container(
height: 高さ,
child: SingleChildScrollView(・・・),
),
SingleChildScrollViewの高さを変えるには、Containerを使います。
SingleChildScrollViewをContainerでラップします。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
height: 150,
color: Colors.blue,
child: SingleChildScrollView(
child: Column(
children: [
for (var i = 0; i < 10; i++)
Text(
'Product $i',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
],
),
),
),
),
);
}
@override Widget build(BuildContext context) { return Scaffold( body: Center( child: Container( height: 150, color: Colors.blue, child: SingleChildScrollView( child: Column( children: [ for (var i = 0; i < 10; i++) Text( 'Product $i', style: TextStyle( fontSize: 20, color: Colors.white, ), ), ], ), ), ), ), ); }
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Container(
        height: 150,
        color: Colors.blue,
        child: SingleChildScrollView(
          child: Column(
            children: [
              for (var i = 0; i < 10; i++)
                Text(
                  'Product $i',
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.white,
                  ),
                ),
            ],
          ),
        ),
      ),
    ),
  );
}

 

Flutter

Posted by arkgame