Блог

Я знаю, что код немного запутанный, все еще учится.

Я разместил изображение за пределами BoxDecoration, но появляется заметка. При запуске ничего не отображается как ошибка. Я предполагаю, что это как-то связано с контейнером внутри ListView, но не смог выяснить, почему он пустой.

 import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 0.0,
        title: Text("App"),
      ),
      body: SafeArea(
        child: Container(
          height: 80,
          decoration: new BoxDecoration(
              color: Colors.blue,
              borderRadius: new BorderRadius.only(
                  bottomLeft:  const  Radius.circular(40.0),
                  bottomRight: const  Radius.circular(40.0))
          ),
          child: ListView(
            children: <Widget>[
              Container(
                margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
                width: 120,
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey[300],
                      offset: Offset(1, 1),
                      blurRadius: 0
                    ),
                  ], // BoxShadow
                    borderRadius: BorderRadius.all(Radius.circular(20))
                ),
                child: ListTile(
                  leading: Icon(Icons.search, color: Colors.red),
                  title: TextField(
                    decoration: InputDecoration(
                      hintText: "What stuff do you want to seach for?",
                      hintStyle: TextStyle(fontSize: 16, color: Colors.grey),
                      border: InputBorder.none
                    ),
                  ),
                  trailing: Icon(Icons.filter_list, color: Colors.red),
                ),
              ),
              SizedBox(height: 5),
              Container(
                height: 220,
                width: 220,
                child: Column(
                  children: <Widget>[
                    Container(
                      decoration: BoxDecoration(
                        color: Colors.white,
                        boxShadow: [
                          BoxShadow(
                            color: Colors.red,
                            offset: Offset(1, 1),
                            blurRadius: 4
                          ),
                        ],
                      ),
                      child: Image.asset("assets/images/1.jpg"),
                    ),
                  ],
                ),

              ),
            ],
          ),
        ),
      )
    );
  }
}
 

Это то, что я пытаюсь сделать.

Я обновил структуру в виде столбца с двумя дочерними элементами:

• Синий Container с текстовым полем
• ListView С изображениями

 import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Home(),
    ),
  );
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(elevation: 0.0, title: Text("App")),
      body: SafeArea(
        child: Column(
          children: [
            Container(
              padding: EdgeInsets.all(20.0),
              decoration: const BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(40.0),
                  bottomRight: Radius.circular(40.0),
                ),
              ),
              child: DecoratedBox(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(20.0),
                ),
                child: const ListTile(
                  leading: Icon(Icons.search),
                  title: TextField(
                    decoration: InputDecoration(
                      hintText: "What stuff do you want to seach for?",
                      hintStyle: TextStyle(fontSize: 16, color: Colors.grey),
                      border: InputBorder.none,
                    ),
                    autofocus: true,
                  ),
                  trailing: Icon(Icons.filter_list),
                ),
              ),
            ),
            SizedBox(
              height: 120.0,
              child: ListView(
                scrollDirection: Axis.horizontal,
                shrinkWrap: true,
                children: List.generate(
                  20,
                  (index) => Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Image.asset("assets/images/cartoon.jpg"),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}