Flutter SingleChildScrollView 滾動頁面

RookieFlutter發表於2021-08-27

我嘗試使用 SingleChildScrollView 建立滾動頁面但出現錯誤,我該如何解決問題?結果想要的是固定的appbar 和一個可滾動的表單。錯誤:RenderFlex 子項具有非零 flex 但傳入的高度約束是無界的。錯誤似乎告訴我高度不夠,但我對自己犯的錯誤感到沮喪。我設計的程式碼

import 'package:dailyreport/weatheritem.dart';
import 'package:scroll_snap_list/scroll_snap_list.dart';

class ReferenceDetail extends StatefulWidget {
  @override
  _ReferenceDetailState createState() => _ReferenceDetailState();
}

class _ReferenceDetailState extends State<ReferenceDetail> {
  final _formKey = GlobalKey<FormState>();
  late Function slideAction;
  List<Widget> weatherData = [];
  ScrollController controller = ScrollController();
  bool closeTopContainer = false;
  double topContainer = 0;
  int _focusedIndex = 0;

  void _onItemFocus(int index) {
    setState(() {
      _focusedIndex = index;
    });
  }

  void getPostData() {
    List<dynamic> returnweather = WEATHERITEM; //get the weather data
    List<Widget> weatherlist = [];
    returnweather.forEach((post) {
      weatherlist.add(
        Container(
          height: 200,
          width: 120,
          margin: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 40.0),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              color: Colors.white,
              boxShadow: [
                BoxShadow(color: Colors.black.withAlpha(100), blurRadius: 5.0),
              ]),
          child: Padding(
            padding:
                const EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Image.asset(
                  post["weather"],
                ),
                SizedBox(height: 5.0),
                Text(
                  post["weather_name"],
                  style: const TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                    color: Colors.grey,
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    });
    setState(() {
      weatherData = weatherlist;
    });
    SizedBox(height: 50.0);
  }

  int selectedRadio = 0;

  @override
  void initState() {
    super.initState();
    selectedRadio = 0;
    _onItemFocus(_focusedIndex);
    getPostData();
    controller.addListener(() {
      double value = controller.offset / 119;
      setState(() {
        topContainer = value;
        closeTopContainer = controller.offset > 100;
      });
    });
  }

  setSelectedRadio(int val) {
    setState(() {
      selectedRadio = val;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Colors.orange.shade200, Colors.white])),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: new AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0,
          leading: IconButton(
            icon: Icon(Icons.arrow_back_ios_outlined,
                color: Colors.black, size: 30),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          title: Text(
            '日報表',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 30,
              color: Colors.black,
            ),
          ),
        ),
        body: SingleChildScrollView(
          child: Form(
            key: _formKey,
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Padding(
                padding: const EdgeInsets.only(top: 25.0, left: 20.0),
                child: Container(
                  child: Text(
                    '專案名稱:',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 20.0),
                child: Center(
                  child: Text(
                    'Chuk Yuen Shopping Ctr.30 project',
                    style:
                        TextStyle(fontSize: 16, fontWeight: FontWeight.normal),
                  ),
                ),
              ),
              RadioListTile(
                value: 1,
                groupValue: selectedRadio,
                title: Text(
                  '參考編號:',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                subtitle: Text(
                  '202012170000',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.normal,
                  ),
                ),
                onChanged: (value) {
                  setSelectedRadio(1);
                },
              ),
              RadioListTile(
                value: 2,
                groupValue: selectedRadio,
                title: Text(
                  '客戶編號:',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                onChanged: (value) {
                  setSelectedRadio(2);
                },
              ),
              selectedRadio == 2
                  ? Padding(
                      padding: const EdgeInsets.only(
                          top: 5.0, left: 20.0, right: 20.0),
                      child: TextFormField(
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(30.0),
                            borderSide: BorderSide.none,
                          ),
                          fillColor: Colors.white,
                          filled: true,
                          hintText: '輸入客戶編號',
                        ),
                      ),
                    )
                  : SizedBox(),
              Padding(
                padding: EdgeInsets.only(left: 20.0),
                child: Text(
                  '發布日期:',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(
                    top: 10.0, left: 20.0, right: 20.0, bottom: 10.0),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: Container(
                    height: 50,
                    color: Colors.white,
                    child: InkWell(
                      onTap: () async {
                        final initialDate = DateTime.now();
                        await showDatePicker(
                          context: context,
                          initialDate: initialDate,
                          //showEXTalkDay == false ? initialDate : exTalkDay,
                          firstDate: DateTime(DateTime.now().year - 2),
                          lastDate: DateTime(DateTime.now().year + 3),
                          builder: (BuildContext context, Widget? child) {
                            return Theme(
                              data: Theme.of(context).copyWith(
                                colorScheme: ColorScheme.light(),
                                primaryColor: Colors.orange,
                                textButtonTheme: TextButtonThemeData(
                                    style: TextButton.styleFrom(
                                        primary: Colors.grey)),
                              ),
                              child: child!,
                            );
                          },
                        );
                      },
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Padding(
                            padding: EdgeInsets.only(left: 30),
                            child: Text(
                              '28/08/21',
                              /*showEXTalkDay == false
                            ? 'DD/MM/YY'
                            : '${exTalkDay.day}/${exTalkDay.month}/${exTalkDay.year}'*/
                              style: TextStyle(
                                fontSize: 20.0,
                                fontWeight: FontWeight.bold,
                                color: Colors.grey[500],
                              ),
                            ),
                          ),
                          Expanded(child: SizedBox()),
                          Padding(
                            padding: EdgeInsets.only(right: 20),
                            child: Image(
                                image: AssetImage('assets/arrowupanddown.png')),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              SizedBox(height: 10.0),
              Padding(
                padding: const EdgeInsets.only(left: 20.0),
                child: Text(
                  '天氣:',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: ScrollSnapList(
                    shrinkWrap: true,
                    onItemFocus: _onItemFocus,
                    itemSize: 150,
                    scrollDirection: Axis.horizontal,
                    itemCount: weatherData.length,
                    itemBuilder: (context, index) {
                      double scale = 1.0;
                      if (topContainer > 0.5) {
                        scale = index + 0.5 - topContainer;
                        if (scale < 0) {
                          scale = 0;
                        } else if (scale > 1) {
                          scale = 1;
                        }
                      }
                      return GestureDetector(
                        child: Opacity(
                          opacity: scale,
                          child: Transform(
                            transform: Matrix4.identity()..scale(scale, scale),
                            alignment: Alignment.bottomCenter,
                            child: Align(
                                heightFactor: 1.0,
                                alignment: Alignment.topCenter,
                                child: weatherData[index]),
                          ),
                        ),
                      );
                    }),
              ),
              SizedBox(height: 20.0),
              Row(children: [
                Padding(
                  padding: const EdgeInsets.only(left: 20.0, top: 15.0),
                  child: Text(
                    '工地現場工作',
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Expanded(child: SizedBox()), //space between two elements
                Padding(
                  padding: const EdgeInsets.only(right: 20.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(50),
                    child: SizedBox(
                      height: 50,
                      width: 100,
                      child: ElevatedButton(
                        style: ButtonStyle(
                          backgroundColor: MaterialStateProperty.all<Color>(
                              Colors.orange.shade600),
                        ),
                        onPressed: () {
                          Navigator.of(context).pop();
                        }, //onpressed
                        child: Text(
                          '新增',
                          style: TextStyle(
                            fontSize: 24,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ]),
              SizedBox(height: 20),
              Padding(
                padding: const EdgeInsets.only(left: 20.0),
                child: Text(
                  '任務',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ]),
          ),
        ),
      ),
    );
  }
}
複製程式碼

相關文章