【Flutter实战静态页面】--在线点餐app（8）——详情框架1

 原路指南

【Flutter】在线点餐APP_哔哩哔哩_bilibili

文章只作为初学者学习记录

---

//----------------------------------------------------

//**把Image-->Extract Widget"ItemImager"*/

//**把class ItemImage放入item_image.dart.dart文件中*/

//----------------------------------------------------

//**把Container-->Wrap the Widget"Expanded"

//把Container-->Extract Widget"ItemInfo"

//----------------------------------------------------

//把Row-->Extract Method "shopName"

 

 

import 'package:flutter/material.dart';
import 'package:foodordering/component/search_box.dart';
import 'package:foodordering/constants.dart';
import 'package:foodordering/screens/details/components/app_bar.dart';
import 'package:foodordering/screens/home/components/category_list.dart';

//----------------------------------------------------
//**把AppBar-->Extract  Method"detailsAppBar"*/
//**把class detailsAppBar放入app_bar.dart.dart文件中 */
//----------------------------------------------------
//**把Image-->Extract Widget"ItemImager"*/
//**把class ItemImage放入app_bar.dart.dart文件中 */
class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: kPrimaryColor,
      appBar: detailsAppBar(),
      body: Body(),
    );
  }
}

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Column(
      children: [
        ItemImage(
          imgSrc: "assets/images/burger.png",
        ),
        Container(
          padding: EdgeInsets.all(20),
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(30),
              topRight: Radius.circular(30),
            ),
          ),
        ),
      ],
    );
  }
}

class ItemImage extends StatelessWidget {
  final String? imgSrc;
  const ItemImage({
    Key? key,
    this.imgSrc,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Image.asset(
      imgSrc!,
      height: size.height * 0.25,
      width: double.infinity,
      fit: BoxFit.fill,
    );
  }
}

 

import 'package:flutter/material.dart';
import 'package:foodordering/constants.dart';
import 'package:foodordering/screens/details/components/app_bar.dart';
import 'package:foodordering/screens/details/components/item_image.dart';

//----------------------------------------------------
//**把AppBar-->Extract  Method"detailsAppBar"*/
//**把class detailsAppBar放入app_bar.dart.dart文件中 */
//----------------------------------------------------
//**把Image-->Extract Widget"ItemImager"*/
//**把class ItemImage放入item_image.dart.dart文件中 */
//----------------------------------------------------
//**把Container-->Wrap the Widget"Expanded"
//把Container-->Extract Widget"ItemInfo"
//----------------------------------------------------
//把Row-->Extract Method "shopName"

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: kPrimaryColor,
      appBar: detailsAppBar(),
      body: Body(),
    );
  }
}

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Column(
      children: [
        ItemImage(
          imgSrc: "assets/images/burger.png",
        ),
        Expanded(
          child: ItemInfo(),
        ),
      ],
    );
  }
}

class ItemInfo extends StatelessWidget {
  const ItemInfo({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      width: double.infinity,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30),
          topRight: Radius.circular(30),
        ),
      ),
      child: Column(
        children: [
          shopName("MacDonalds"),
          
        ],
      ),
    );
  }

  Row shopName(String name) {
    return Row(
          children: [
            Icon(
              Icons.location_on,
              color: ksecondaryColor,
            ),
            SizedBox(width: 10),
            Text(name),
          ],
        );
  }
}